/* ============================================================================ we-nav-armour.css — the one nav's defence against host-page CSS. Chey, 2026-08-04, on the Tour page (fluid_world_2): "the glyph in the hamburger button is a weird blue and all the links are default hyperlink blue. There's also an odd shadow/glow underneath the we-commerce logo when the menu is open. This is the only page where I'm noticing this." WHY ONLY THAT PAGE. site_nav gives every page identical nav MARKUP, but each of the 26 page stylesheets still carries its own legacy copy of the nav CSS, and fw-world-2.css goes further: it is a 3D-scene page whose HUD owns the BARE class `.brand` (assets/fw-world-2.css:38): .brand, .controls{ padding:8px; border:1px solid rgba(255,255,255,.5); border-radius:999px; background:rgba(246,250,244,.82); box-shadow:0 16px 40px rgba(35,81,111,.16); backdrop-filter:blur(16px) saturate(1.2); } The nav's logo link is also `.brand`, so it silently inherits that frosted HUD pill — the light blob and drop shadow under the WE-Commerce logo. The guard that page already had (`.nav .brand{...}`, fw-world-2.css:2110) sets only display/align/flex/height, so background, border, radius, shadow and the backdrop blur all leaked through. The colours are the same class of bug. The drawer is built by we-mobile-nav.js, whose inner spans use the very generic classes `.tt`, `.ds`, `.ic`, `.tx`, and its stylesheet is linked from the layout — i.e. BEFORE every page sheet in the body. So any page rule of equal specificity beats it on source order, and anything at 0,2,0 (`.dd-item .tt`, `.nav-inner button`) beats its 0,1,0 rules outright. When the winning declaration resolves a custom property that is not in scope on the drawer (the panel is appended to , outside `.nav`, so `--nav-*` tokens do not reach it), the property is invalid at computed-value time and the text falls back to inherit — which is what turns nav links into hyperlink blue. WHY THIS FILE FIXES IT CONCLUSIVELY. site_nav links this sheet immediately after we-teaser-nav.css, so it is the LAST nav CSS in the document on every page — it wins every specificity tie — and each selector below is also deliberately over-specific (0,3,0 via `.nav .nav-inner > x`, or scoped under `.we-mnav-panel`) so it outranks the 0,2,0 page-sheet rules without `!important` and without editing 26 legacy stylesheets. Colours here are LITERAL, never `var()`. That is the point: a token can be out of scope on a body-level drawer, a hex value cannot. Everything else about the nav still lives in we-teaser-nav.css (bar, links, dropdown) and we-mobile-nav.css (button, panel, rows). This file only neutralises host-page bleed. ========================================================================= */ /* --- 1. The logo link ------------------------------------------------------ we-teaser-nav.css:92 already anticipated this page and resets `padding/margin/gap/background/border` on `.nav .brand`. It misses exactly three of the properties the HUD pill sets — and those three ARE the artefact Chey saw: border-radius:999px -> rounded blob box-shadow:0 16px 40px rgba(35,81,111,.16) -> the glow under the logo backdrop-filter:blur(16px) saturate(1.2) -> the smeared halo Only those are declared here, so this file cannot fight the canonical logo styling on the other 25 pages — on any page whose sheet has no `.brand` rule these are already the initial values and the whole block is a no-op. The `-webkit-` prefix is included because the leaking rule sets it too. */ .nav .nav-inner > .brand{ border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } /* --- 2. The hamburger button ---------------------------------------------- Only the glyph colour is forced. The button's own chip (background, radius, size) is we-mobile-nav.css's design and is left alone — the bars are drawn with `currentColor`, so fixing `color` fixes the glyph. 0,3,0 beats a host-page `.nav-inner button{color:...}` at 0,2,0. */ .nav .nav-inner > .we-mnav-btn{ color:#f7f8fa; } /* --- 3. The drawer ------------------------------------------------------- Scoped under `.we-mnav-panel` because the panel lives at level, out of reach of `.nav ...` selectors. These re-assert we-mobile-nav.css's own palette with literal values from a sheet that loads after the page's. */ .we-mnav-panel .we-mnav-link{ color:#f7f8fa; } .we-mnav-panel .we-mnav-item{ color:#f7f8fa; } .we-mnav-panel .we-mnav-item .tt{ color:#f7f8fa; } .we-mnav-panel .we-mnav-item .ds{ color:rgba(247,248,250,.62); }