/* THE TOP BAR, IN ONE PLACE. Extracted 2026-09-11, the same day and for the same reason as /assets/alg-foot.css. His voice note: "you have one job to do, which is making sure that each page is following the navbar." tests/header-shape.cjs read the rendered bar on twenty live pages and grouped them by the words a visitor reads across the top. SEVEN different bars: askmuse | features | how it works | hear a call | pricing | compare | faq | sign in /, /pricing askmuse | home /websites + the 3 legal pages askmuse /download home | hear it answer | call it now /for home | trades we answer for | ... the 18 trade pages askmuse | fr | sign in | book a time | ... (12) the 6 React pages + 2 French askmuse | try it free the missed-call calculator Four of them are written by four different build systems. The SHELL was already shared — the .logo lockup, the .theme-sw and the .burger all follow docs/SITE-HEADER-THEME-CONTRACT.md — but the shell lived as a copy inside each generator, and the LINKS were each page's own invention. This file is the shell; tools/sync-header.mjs is the links. Same division as the footer. Lifted verbatim from tools/gen-trade-pages.mjs, which had the fullest implementation. Nothing here is redesigned: the numbers are the ones already on the nineteen trade pages. The askmuse palette is not here — alg-brand.css owns that, scoped to the brand. */ nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid rgba(15,23,42,.08)} [data-theme="dark"] nav{background:rgba(11,18,32,.92);border-bottom-color:rgba(255,255,255,.08)} /* The header container is the homepage's 1100px, 22px in from the edge (an article below may keep a narrower reading width): the mark lands at the same x on every page — 22px on phones, 112 at 1280. */ /* THE LANDING PAGE'S BOX, and the gutter goes on nav .wrap and NOT on .nav-in. Five pages carry their own `nav .wrap{...;padding:0 22px}` at (0,1,1), which beats a bare .nav-in at (0,1,0) — so writing the gutter on .nav-in is a silent no-op on exactly those five, and the change would have looked applied and done nothing. Found by reading their stylesheets, not by deploying. --gut is COPIED AS THE CLAMP, not as a literal 44px: at 390 the clamp gives 20px, and a flat 44 would take 48px of width off every phone. */ nav .wrap{max-width:1180px;padding-left:clamp(20px,5vw,44px);padding-right:clamp(20px,5vw,44px)} .nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:0} .nav-in>*{min-width:0} /* ONE LOCKUP. His 2026-09-11: "logo size and muse written not acvording to theme color / make sure consiten among all page size and how it is written". Measured across nine pages in both themes first — the mark was 46px on the landing pages and 34 everywhere else, and the wordmark was Outfit 21.12/600/-0.2px on the landing, Sora 17/600/-0.2 on the static pages and Sora 17/800/normal on the React ones. Three treatments. These are the landing page's numbers. */ .logo{display:flex;align-items:center;gap:11px;font-family:Outfit,Inter,system-ui,sans-serif;font-weight:600;font-size:21.12px;letter-spacing:-.2px;color:var(--ink,#0f172a);line-height:1.15} .logo span{white-space:nowrap} .logo small{display:block;font-family:Inter,system-ui,sans-serif;font-size:10px;font-weight:600;color:var(--mut,#64748b);letter-spacing:1.2px;line-height:1.35;margin-top:2px;margin-right:-1.2px} .logo .logomark{width:46px;height:46px;border-radius:11px;flex:0 0 auto;vertical-align:middle} /* THE WORDMARK HAS TO BE ALLOWED TO WRAP, and this rule has to come AFTER the nowrap above — both are (0,1,1) and a media query adds nothing to specificity, so document order decides. Placed above the rule it exists to beat, it changes nothing, which is exactly what happened on the apex two days ago: deployed green, page unchanged, still 85px of sideways scroll. "Affordable Leads Generation" at 17px measures 409px against a 390px viewport. It shows up ONLY under the old brand — on askmuse.ca the name is "AskMuse" and fits, which is why a sweep of the new host came back clean. */ @media(max-width:440px){.logo span{white-space:normal}} /* and the tagline goes before the name does: it is the longest single line in the bar */ @media(max-width:380px){.logo small{display:none}} .nav-links{display:flex;flex-wrap:nowrap;gap:20px;font-weight:600;font-size:14.5px} .nav-links a{white-space:nowrap} .nav-links a:hover{color:var(--org,#f97316)} .theme-sw{width:40px;height:40px;flex:0 0 auto;border-radius:10px;border:1px solid var(--line,#e2e8f0);background:var(--card,#fff);color:var(--ink,#0f172a);display:grid;place-items:center;cursor:pointer;padding:0} .theme-sw:hover{border-color:var(--org,#f97316)} .theme-sw .moon{display:none} [data-theme="dark"] .theme-sw .sun{display:none} [data-theme="dark"] .theme-sw .moon{display:block} /* His 2026-09-09 13:45 "A": the AI Receptionist page's menu on every page — a boxed ☰ that becomes ✕ (the same box as the theme switch) and a surface-coloured panel of icon tiles + the button. */ .burger{display:grid;width:40px;height:40px;flex:0 0 auto;padding:0;border-radius:10px;border:1px solid var(--line,#e2e8f0);background:var(--card,#fff);color:var(--ink,#0f172a);cursor:pointer;place-items:center} .burger:hover{border-color:var(--org,#f97316)} .burger svg{width:20px;height:20px;display:block} .burger .ico-x{display:none} .burger.open .ico-menu{display:none} .burger.open .ico-x{display:block} .m-menu{display:none;position:fixed;inset:var(--navh,66px) 0 auto 0;z-index:89;background:var(--card,#fff);border-bottom:1px solid var(--line,#e2e8f0);padding:8px 12px 16px;flex-direction:column;gap:8px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);max-height:calc(100dvh - var(--navh,66px));overflow:auto;overscroll-behavior:contain} [data-theme="dark"] .m-menu{background:#020617;border-color:#1e293b} .m-menu.show{display:flex} .m-menu .m-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .m-menu .m-grid a{display:block;padding:9px 10px;border-radius:12px;font-size:12.5px;font-weight:600;line-height:1.5;background:#f8fafc;color:#334155;border:1px solid #e2e8f0;min-height:44px;display:flex;align-items:center;gap:7px} .m-menu .m-grid a.hot{background:#fff7ed;color:#9a3412;border-color:rgba(249,115,22,.4)} [data-theme="dark"] .m-menu .m-grid a{background:#0f172a;color:#e2e8f0;border-color:#1e293b} [data-theme="dark"] .m-menu .m-grid a.hot{background:rgba(249,115,22,.12);color:#fdba74;border-color:rgba(249,115,22,.45)} /* One column below 320px — two 44px tiles do not fit a 280px viewport with the panel's own padding, and 280 is the width his browser zoom produces. */ @media(max-width:330px){.m-menu .m-grid{grid-template-columns:1fr}} .m-menu .m-ctas{display:flex;flex-direction:column;gap:6px} .m-menu .m-ctas .btn{width:100%;text-align:center;padding:10px 14px;font-size:12px;font-weight:800;border-radius:12px;margin:0} /* 1100px is the homepage's breakpoint: the links and the CTA fold into the burger's sheet, the switch STAYS in the bar (a phone user must not have to open a menu to find it) and sits beside the burger. */ /* THE BURGER AT EVERY WIDTH — his 2026-09-11, on the landing page: "on my desktop screen hamburgren menu is missing - but when i open on mobile it shows up." The bar carries seven destinations and the sheet carries the rest, so hiding it above 1100 left half the site reachable only by typing the address. Only the links and the CTA fold now. */ @media(max-width:1100px){.nav-links,.nav-cta{display:none}.theme-sw{margin-left:auto}} /* THE MARK, AT ONE SIZE, IN THE BAR ONLY. Thirty-six pages carry their own `.logo .logomark{width:34px;height:34px}` — same specificity as the shared rule, later in the document, so they win. `nav .logo .logomark` is (0,3,0) and beats all of them without touching the same class anywhere else on the page (the footer lockup keeps its own 34px mark, which is correct: it sits in a 14.9px column, not a 72px bar). 38 below 430px because the wordmark is allowed to wrap there and a 46px mark beside two lines of text pushes the bar past 90px on a phone. */ nav .logo .logomark{width:46px;height:46px;border-radius:11px} @media(max-width:430px){nav .logo .logomark{width:40px;height:40px}} /* THE LANDING PAGE'S LINKS AND BUTTON, ON ASKMUSE.CA. 2026-09-15, his "header is not same as main page, askmuse.ca". The LABELS were already one set (tests/header-shape.cjs compares them), but the bar was painted three ways, measured live at 1280 in dark: askmuse.ca/ links #a6a6bb 15.04px/400, no underline, 30px apart; "Start free trial" a violet gradient pill (10px 20px, 999px, 14.4px/600, #08080d ink); order: links, button, theme switch, burger; ground rgba(7,7,11,.72) /for/roofing links #f5f5f8 14.5px/600; a solid 11px-radius button, white 16px/700 /receptionist/security links UNDERLINED in lavender (the page skin's own a{} rule reached them) and "Start free trial" as plain underlined text, not a button The legal pages, /websites, /download, the calculator, the trade pages and the two round-trip pages all load this file, so the landing page's numbers go here, scoped to the AskMuse brand (alg-brand.js sets data-brand before paint). html[data-brand] nav … is (0,2,2) and up, so it beats every page skin's a{}, .btn{} and nav{} without touching those skins. Light values are the landing page's light theme (--muted #55556e, sapphire #0f52ba → #1565d8, white ink). The button moves ahead of the switch with flex `order`, not by rewriting the markup on thirty pages. */ html[data-brand="askmuse"] nav{background:rgba(246,246,250,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(12,12,28,.10)} html[data-brand="askmuse"][data-theme="dark"] nav{background:rgba(7,7,11,.72);border-bottom-color:rgba(255,255,255,.085)} html[data-brand="askmuse"] nav .nav-links{gap:30px;font-weight:400;font-size:15.04px} html[data-brand="askmuse"] nav .nav-links a{color:#55556e;text-decoration:none;transition:color .18s ease} html[data-brand="askmuse"][data-theme="dark"] nav .nav-links a{color:#a6a6bb} html[data-brand="askmuse"] nav .nav-links a:hover{color:#0e0e18} html[data-brand="askmuse"][data-theme="dark"] nav .nav-links a:hover{color:#f5f5f8} html[data-brand="askmuse"] nav .nav-cta{display:inline-flex;align-items:center;justify-content:center;order:1; padding:10px 20px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:14.4px;letter-spacing:-.005em; white-space:nowrap;text-decoration:none;background:linear-gradient(100deg,#0f52ba,#0f52ba 40%,#1565d8);color:#fff; box-shadow:0 10px 34px -12px rgba(139,140,248,.75);transition:transform .18s ease,box-shadow .22s ease} /* WHITE INK ON THE DARK-THEME BUTTON, 2026-09-29. This rule used to paint a light-violet gradient under #08080d ink, but alg-brand.css's fill rule (html[data-brand]:not([data-surface="app"]) .btn:not(.ghost), specificity 0,4,1) out-ranks it and repaints the face solid --org-btn (#5b5ce0) while leaving the ink dark: tests/cta-contrast.cjs read #08080d on #5b5ce0 = 3.86:1 on /websites, /download and /for/*. --org-btn is the depth chosen to CARRY WHITE (5.18:1), so the ink follows the fill that actually paints. */ html[data-brand="askmuse"][data-theme="dark"] nav .nav-cta{background:var(--org-btn,#5b5ce0);color:var(--org-btn-ink,#fff)} html[data-brand="askmuse"] nav .nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 42px -12px rgba(139,140,248,.9)} html[data-brand="askmuse"] nav .nav-cta::after{content:none} html[data-brand="askmuse"] nav .theme-sw{order:2} html[data-brand="askmuse"] nav .burger{order:3} /* THE MARK TALKS, as it does in askmuse.ca's own header (askmuse-front/index.html, "the mark talks": his "is is possible if logo vibrates like real convo of muse"). His 2026-09-15 pick: the moving logo on every page's header, not a still one everywhere but the home page. The classes are written into the lockup by tools/sync-header.mjs; the numbers are the landing page's. */ nav .logo .mark-live .mb{transform-box:fill-box;transform-origin:center} nav .logo .mark-live .mb1{animation:mark-talk 1.35s ease-in-out infinite alternate} nav .logo .mark-live .mb2{animation:mark-talk .95s ease-in-out -.4s infinite alternate} nav .logo .mark-live .mb3{animation:mark-talk 1.75s ease-in-out -.8s infinite alternate} nav .logo .mark-live .md{animation:mark-dot 2.4s ease-in-out infinite} @keyframes mark-talk{from{transform:scaleY(.42)}to{transform:scaleY(1)}} @keyframes mark-dot{0%,100%{opacity:1;r:20}50%{opacity:.5;r:16}} @media (prefers-reduced-motion:reduce){nav .logo .mark-live .mb,nav .logo .mark-live .md{animation:none}} /* THE SPACING: the landing page's three groups (lockup | links | button+switch+menu), the links centred between the other two and 14px inside the right-hand group. space-between across five items spread the switch and the menu 60px apart instead. */ html[data-brand="askmuse"] nav .nav-in{justify-content:flex-start;gap:14px} html[data-brand="askmuse"] nav .nav-links{margin-left:auto;margin-right:auto} /* THE SWITCH AND THE MENU BUTTON, the landing page's boxes: 38px/r12 on a faint fill with the stronger hairline, 42px/r11 on the same fill with the softer one. And the SAME ICON: the landing page shows what a click will do (a moon on the light page, a sun on the dark one) while these pages showed the current state, so the two switches pointed opposite ways side by side — his 2026-09-15 "the logo of theme selector on different pages appear different". */ /* the switch itself (box and icon) moved to alg-brand.css the same evening, so the React pages get it too */ html[data-brand="askmuse"] nav .burger{width:42px;height:42px;border-radius:11px;border:1px solid rgba(12,12,28,.10);background:rgba(12,12,28,.042);color:#0e0e18} html[data-brand="askmuse"][data-theme="dark"] nav .burger{border-color:rgba(255,255,255,.085);background:rgba(255,255,255,.04);color:#f5f5f8} html[data-brand="askmuse"] nav .theme-sw:hover,html[data-brand="askmuse"] nav .burger:hover{border-color:#0f52ba} html[data-brand="askmuse"][data-theme="dark"] nav .theme-sw:hover,html[data-brand="askmuse"][data-theme="dark"] nav .burger:hover{border-color:#8b8cf8} @media (prefers-reduced-motion:reduce){html[data-brand="askmuse"] nav .nav-cta,html[data-brand="askmuse"] nav .nav-cta:hover{transform:none;transition:none}} /* the fold at 1100 has to be restated at this specificity, or the button above would stay in the bar on a phone */ @media(max-width:1100px){html[data-brand="askmuse"] nav .nav-cta{display:none}} /* THE MENU SHEET, THE LANDING PAGE'S. His 2026-09-15 (Discord, three phone screenshots): "askmuse.ca hamburger menu and pages which we integrated from alg - hamburger menu design, size of tabs not same, even colour combination". Measured at 390px in dark, sheet open: askmuse.ca/ .nav-mob ground rgba(7,7,11,.97); tabs 46px, 14.08px/600, fill rgba(255,255,255,.06), hairline rgba(255,255,255,.085), r12, text #f5f5f8; button = gradient pill these pages .m-menu ground #020617; tabs 44px, 12.5px/600, fill #0f172a, border #1e293b (ALG navy) The landing page's numbers, both themes, scoped to the AskMuse brand so the ALG skin keeps its own. */ html[data-brand="askmuse"] .m-menu{background:rgba(255,255,255,.98);border-bottom-color:rgba(12,12,28,.10);box-shadow:none;padding:14px clamp(20px,5vw,44px) 22px} html[data-brand="askmuse"][data-theme="dark"] .m-menu{background:rgba(7,7,11,.97);border-bottom-color:rgba(255,255,255,.085)} html[data-brand="askmuse"] .m-menu .m-grid{gap:9px} html[data-brand="askmuse"] .m-menu .m-grid a{min-height:46px;padding:10px 13px;font-size:14.08px;font-weight:600;line-height:1.25;border-radius:12px; background:rgba(12,12,28,.05);color:#0e0e18;border:1px solid rgba(12,12,28,.10);gap:8px;text-decoration:none} html[data-brand="askmuse"][data-theme="dark"] .m-menu .m-grid a{background:rgba(255,255,255,.06);color:#f5f5f8;border-color:rgba(255,255,255,.085)} html[data-brand="askmuse"] .m-menu .m-grid a:hover{border-color:#0f52ba} html[data-brand="askmuse"][data-theme="dark"] .m-menu .m-grid a:hover{border-color:#8b8cf8} html[data-brand="askmuse"] .m-menu .m-grid a span{font-size:16px;line-height:1} html[data-brand="askmuse"] .m-menu .m-ctas .btn{display:flex;align-items:center;justify-content:center;margin-top:12px;padding:14px 26px;border-radius:999px; font-size:15.5px;font-weight:600;border:0;background:linear-gradient(100deg,#0f52ba,#0f52ba 40%,#1565d8);color:#fff; box-shadow:0 10px 34px -12px rgba(139,140,248,.75);text-decoration:none} html[data-brand="askmuse"][data-theme="dark"] .m-menu .m-ctas .btn{background:linear-gradient(100deg,#8b8cf8,#8b8cf8 40%,#b89bfb);color:#08080d} html[data-brand="askmuse"] .m-menu .m-ctas .btn::after{content:none}