/* WtMTA shared site chrome — a light branded masthead + persistent nav + branded footer, injected by site-chrome.js on every datasette page (base.html loads this pair) and on the /explore shell. Goal: the datasette data pages, the homepage hero, and the custom d3 viz pages read as ONE site. Self-contained: datasette pages don't load cladogram.css, so this defines its own light-palette tokens and matches the homepage hero's design language (near-black #1a1a1a ink, system-ui, pill buttons). It also tones datasette's default blue header/footer bars toward that light brand so they stop competing. Every class is wt- prefixed; the datasette overrides are scoped (`.not-footer > header`, `body > footer.ft`) so they can't touch the injected masthead/footer. Load order (this comes after app.css in ) + a class on the scoped selectors keeps these winning over datasette core without !important. */ :root{ --wt-ink:#1a1a1a; --wt-muted:#5f6672; --wt-border:#e4e6ea; --wt-bg:#fff; --wt-soft:#f6f7f9; } /* ---------- masthead ---------- */ .wt-mast{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between; gap:.75rem 1rem;flex-wrap:wrap;padding:8px 16px;background:var(--wt-bg); border-bottom:1px solid var(--wt-border);box-shadow:0 1px 0 rgba(0,0,0,.02),0 6px 14px -12px rgba(0,0,0,.35); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} /* .wt-mast a (0,2,1) wins over datasette's `a:link` (0,1,1/underline 0,1,2) which would otherwise underline and blue-tint the wordmark/nav; the active-pill white below is later + equally specific so it wins */ .wt-mast a:link,.wt-mast a:visited,.wt-mast a:hover,.wt-mast a:focus{text-decoration:none;color:var(--wt-ink)} .wt-brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--wt-ink)} .wt-brand-ico{width:30px;height:30px;flex:0 0 auto;display:block} .wt-brand-name{font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1} .wt-brand-sub{color:var(--wt-muted);font-weight:500;font-size:12.5px;line-height:1.1; border-left:1px solid var(--wt-border);padding-left:.55rem;margin-left:.05rem} .wt-nav{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap} .wt-nav a{display:inline-flex;align-items:center;gap:.35em;text-decoration:none;color:var(--wt-ink); font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:7px 13px; border:1.5px solid var(--wt-border);border-radius:999px;background:var(--wt-bg);white-space:nowrap; transition:border-color .12s,background .12s,color .12s,transform .05s} .wt-nav a:hover{border-color:var(--wt-ink);transform:translateY(-1px);text-decoration:none} .wt-nav a[aria-current="page"]{background:var(--wt-ink);color:#fff;border-color:var(--wt-ink)} .wt-nav a .ic{font-size:14px;line-height:1} .wt-nav a .ic-img{width:16px;height:16px;display:block;flex:0 0 auto} /* ---- "Tables" dropdown (native
) ---- */ .wt-nav .wt-menu{position:relative;list-style:none} .wt-nav .wt-menu>summary{display:inline-flex;align-items:center;gap:.35em;cursor:pointer;list-style:none; white-space:nowrap;color:var(--wt-ink);font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding:7px 13px;border:1.5px solid var(--wt-border);border-radius:999px;background:var(--wt-bg); transition:border-color .12s,background .12s,color .12s,transform .05s} .wt-nav .wt-menu>summary::-webkit-details-marker{display:none} .wt-nav .wt-menu>summary::marker{content:""} .wt-nav .wt-menu>summary:hover{border-color:var(--wt-ink);transform:translateY(-1px)} .wt-nav .wt-menu.active>summary{background:var(--wt-ink);color:#fff;border-color:var(--wt-ink)} .wt-nav .wt-menu .ic{font-size:14px;line-height:1} .wt-nav .wt-menu .wt-caret{font-size:10px;opacity:.7;transition:transform .12s} .wt-nav .wt-menu[open]>summary .wt-caret{transform:rotate(180deg)} .wt-menu-pop{position:absolute;right:0;top:calc(100% + 7px);z-index:200;min-width:190px; background:var(--wt-bg);border:1px solid var(--wt-border);border-radius:12px;padding:5px; box-shadow:0 10px 26px rgba(0,0,0,.14);display:flex;flex-direction:column;gap:2px} .wt-menu-pop a{display:block;padding:8px 12px;border-radius:8px;color:var(--wt-ink);white-space:nowrap; font:600 13px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} .wt-menu-pop a:hover{background:var(--wt-soft)} .wt-nav .wt-menu-pop a[aria-current="page"]{background:var(--wt-ink);color:#fff} @media (max-width:600px){ .wt-brand-sub{display:none} .wt-mast{padding:7px 12px} .wt-nav a{padding:6px 11px;font-size:12px} .wt-nav a .ic{font-size:13px} } /* ---------- tone datasette's default blue bars toward the light brand ---------- */ /* the breadcrumb strip (home / WtMTA / …) becomes a slim light bar under the masthead */ .not-footer > header{background:var(--wt-soft);color:var(--wt-muted);border-bottom:1px solid var(--wt-border); min-height:0;padding:.3rem 1rem} .not-footer > header a:link,.not-footer > header a:visited{color:var(--wt-muted);text-decoration:none} .not-footer > header a:hover,.not-footer > header a:focus,.not-footer > header a:active{color:var(--wt-ink)} .not-footer > header .crumbs{font-size:13px} /* hide datasette's default hamburger nav-menu — redundant with the masthead's Tree/Scatter/Genomes buttons */ .not-footer > header .nav-menu{display:none} /* ---------- footer ---------- */ body > footer.ft{background:var(--wt-soft);color:var(--wt-muted);border-top:1px solid var(--wt-border); overflow:visible;padding:0 0 .7rem} body > footer.ft a:link,body > footer.ft a:visited{color:var(--wt-muted)} body > footer.ft a:hover{color:var(--wt-ink)} /* datasette's own attribution line (Powered by Datasette · Queries · license · source) drops to fine print */ body > footer.ft{font-size:11.5px} .wt-foot,.wt-foot-standalone{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; max-width:1100px;margin:0 auto;padding:1.1rem 16px .6rem;color:var(--wt-muted);font-size:13px;line-height:1.5} .wt-foot-standalone{border-top:1px solid var(--wt-border);margin-top:2.2rem;background:var(--wt-soft)} .wt-foot-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.2rem;flex-wrap:wrap; margin-bottom:.5rem} .wt-foot-brand{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:13.5px} /* (0,2,0) beats datasette's footer `a:link` (0,1,2) so "Home" isn't underlined/tinted */ .wt-foot-brand:link,.wt-foot-brand:visited,.wt-foot-brand:hover{color:var(--wt-ink);text-decoration:none} .wt-foot-brand img{width:22px;height:22px;display:block} .wt-foot-nav{display:inline-flex;flex-wrap:wrap;gap:.15rem .3rem} .wt-foot-nav a{color:var(--wt-muted);text-decoration:none;padding:2px 9px;border-radius:999px} .wt-foot-nav a:hover{color:var(--wt-ink);background:var(--wt-bg)} .wt-foot-cite{max-width:80ch} .wt-foot-meta{margin-top:.4em;font-size:12px;color:var(--wt-muted)} .wt-foot-cite a,.wt-foot-meta a{color:var(--wt-ink);text-decoration:none;border-bottom:1px solid var(--wt-border)} .wt-foot-cite a:hover,.wt-foot-meta a:hover{border-bottom-color:var(--wt-ink)} /* license/source now live in the branded footer — hide datasette's duplicate mid-body line (the bare

rendered right after the description block on the index/database/table pages by _description_source_license). */ .metadata-description + p{display:none} /* ---------- genomes table: fold datasette's native FTS search into our type-ahead (genome-search.js redirects free-text Enter to ?_search=), so only ONE search box shows. Scoped by a body flag the script sets so it never hides search on other tables. ---------- */ body.wt-genomes-search .search-row{display:none}