/* ============================================================================ we-teaser-nav.css — THE SITE NAV. One stylesheet, every page. PROMOTED 2026-08-04 (Chey: "only ONE nav, the one that is on the mist page, applied to every page"). This file was written for the countdown page alone, but it was lifted VERBATIM from the same nav block the mist page renders, so it already WAS the canonical nav — verified rule-for-rule against assets/fc-landing.css lines 1347-1443 (bar, chassis, brand, links, dropdown, CTA, torn strip, the 880px and 480px queries), 1596-1625 (the dropdown's torn dark-paper treatment and paper numeral tabs) and 1634-1635 (the CTA's hard offset shadow). Every rule matches. Nothing was re-extracted, precisely because re-extracting from a 197KB sheet is how the comment-token bug below happened. It is now linked ONCE, from components/site_nav/index.liquid, which every section renders. THE NAME IS HISTORICAL — it is no longer teaser-specific and is no longer loaded by sections/mist_teaser directly. Renaming the file would mean re-transcribing ~6KB of mask data URIs by hand for no functional gain, so the name stays and this banner carries the truth instead. WHY THIS WINS THE CASCADE WITHOUT EDITING 26 SHEETS. Every section still ships its own copy of these nav rules inside its page stylesheet, and those are ``ed from INSIDE — so they come after anything in and win specificity ties against it. site_nav links THIS file from inside the body too, immediately after the section's own sheet, so it lands LATER in document order and wins those ties instead. Deliberately kept at LOW specificity (`.nav-inner`, not `.nav .nav-inner`) so that the mobile drawer's overrides in we-mobile-nav.css — which are `.nav .nav-inner` (0,2,0) and `.nav .nav-inner > .btn-cta` (0,3,0) — still beat it below 880px even though they load earlier from . Do not raise the specificity here without re-checking that file. The per-section nav rules are now dead weight, overridden on every page. Stripping them from the 26 page stylesheets is a safe follow-up, not a prerequisite: `width:auto` below plugs the one property a divergent sheet declared that this file did not (how-fluid-works.css:15 sets a `width` on .nav-inner; ns-executive.css:32 sets gap:28px, which loses on order). Take those ranges from the RULES, never from the comment blocks above them. An extract that began at 842 started in the middle of a comment; the stray close-comment token it inherited ended this banner early and swallowed the rule that followed. It cost two rounds: first the dropdown silently kept its old navy card style, then the whole .nav rule stopped applying and the bar only looked right because its children inherited the page's colours. Neither was visible without diffing computed styles. Loaded only by sections/mist_teaser, which only renders while the teaser switch is on. Nothing else references this file. The .nav rule declares its own --nav-* tokens, so this is self-contained; the only outside dependency is --we-paper-dark from layouts/theme.liquid, which every page already has. The Intelligence dropdown is pure CSS (:hover / :focus-within) — no JS to port. ============================================================================ */ .nav{ --nav-bg:#05070a; --nav-ink:#f7f8fa; --nav-line:rgba(255,255,255,.1); --nav-brand:#42b1ff; --nav-label:"WeHaas","Neue Haas Display","Helvetica Neue",sans-serif; --nav-sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; /* rag depth; the bar's own painted height derives from it — see the global-pass note in assets/teardown-rhode.css for the derivation. */ --nav-tear-h:24px; position:fixed;top:0;left:0;right:0;z-index:100; height:calc(69px - .558 * var(--nav-tear-h)); transition:box-shadow .3s,border-color .3s; background-color:var(--nav-bg); background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark); background-size:cover;background-position:center;background-attachment:fixed; border-bottom:1px solid transparent; /* pinned: .btn-cta and .nav-link carry no line-height of their own, so they inherited each host page's body metric and the CTA measured anywhere from 34px to 40.4px across the five. */ font-family:var(--nav-sans);line-height:1.65} @media(max-width:640px){.nav{--nav-tear-h:18px}} .nav.scrolled{border-bottom-color:var(--nav-line); box-shadow:0 8px 18px -11px rgba(0,0,0,.53)} /* the content box stays 68px and overflows the shorter painted bar, so the raised strip supplies the last stretch of paper; z-index 6 keeps the CTA and its shadow above the strip (which is 5). */ /* `width:auto` is not cosmetic: how-fluid-works.css:15 declares a `width` on .nav-inner (min(var(--max),calc(100% - 56px))), which this file would otherwise let leak through on that page and make its bar a different width. Every other property below is already declared, so nothing else can leak. */ .nav-inner{max-width:1120px;width:auto;margin:0 auto;padding:0 24px;height:68px;display:flex; align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:6} /* the host page may already own a .brand class (the tour's 3D-scene HUD does, with its own padding) — reset rather than inherit it. */ .nav .brand{display:flex;align-items:center;flex:0 0 auto;height:68px; padding:0;margin:0;gap:0;background:none;border:0;text-decoration:none} .nav .brand img{display:block;width:auto;height:36px;max-width:208px;object-fit:contain} .nav-actions{display:flex;align-items:center;gap:30px} .nav-link{color:var(--nav-ink);font-size:.92rem;text-decoration:none;transition:color .18s ease} .nav-link:hover{color:#fff} .nav-link[aria-current="page"]{color:#fff} .nav .btn-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:4px; font-size:.85rem;font-weight:700;letter-spacing:-.01em;text-decoration:none; background:var(--nav-brand);color:#050a12;white-space:nowrap; /* BATCH (V1-F5): the §8 nav-CTA spec is a blur-free hard offset. The de-glow pass had replaced it with a soft ambient shadow, making this the only button in the theme without the analog signature. Edited HERE rather than appended: this rule is `.nav .btn-cta` (0,2,0) and a later bare `.btn-cta` (0,1,0) loses to it silently. */ box-shadow:2px 2px 0 rgba(0,0,0,.5); transform:rotate(-.6deg);transition:box-shadow .18s ease,transform .18s ease} .nav .btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)} .nav .dd{position:relative} /* `font:inherit` is a SHORTHAND and resets font-size, so it has to come first — after `font-size` it silently put the trigger back to the button's 16px while the sibling .nav-links stayed at .92rem (V6-2). */ .dd-trigger{display:inline-flex;align-items:center;gap:7px;color:var(--nav-ink); font:inherit;font-size:.92rem;border:0;background:none;cursor:pointer;transition:color .18s ease} .dd-trigger:hover,.dd:hover .dd-trigger,.dd.open .dd-trigger,.dd:focus-within .dd-trigger{color:#fff} .dd-trigger svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease} .dd:hover .dd-trigger svg,.dd.open .dd-trigger svg,.dd:focus-within .dd-trigger svg{transform:rotate(180deg)} .dd-panel{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:302px;padding:8px; border:1px solid var(--nav-line);border-radius:12px;background:rgba(11,15,21,.98); box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(66,177,255,.06); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:70} .dd:hover .dd-panel,.dd.open .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateY(0)} .dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .dd-head{font-family:"FLBold","Arial Black",sans-serif;font-size:.74rem;letter-spacing:.02em; text-transform:uppercase;color:var(--nav-brand);padding:8px 12px 6px; transform:rotate(-.6deg);display:inline-block} .dd-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:9px; text-decoration:none;transition:background .18s ease} .dd-item:hover{background:color-mix(in srgb,var(--nav-brand) 10%,transparent)} .dd-item .ic{flex:0 0 26px;height:26px;border-radius:7px;display:grid;place-items:center; background:linear-gradient(150deg,#123a63,#0a1a2e);border:1px solid rgba(66,177,255,.28); color:var(--nav-brand);font-family:var(--nav-label);font-size:.62rem;font-weight:700;margin-top:1px} .dd-item .tt{display:block;color:var(--nav-ink);font-size:.86rem;font-weight:560;line-height:1.25} .dd-item .ds{display:block;color:var(--nav-ink);font-size:.72rem;line-height:1.3;margin-top:3px} .dd-item.now{background:color-mix(in srgb,var(--nav-brand) 10%,transparent)} .dd-item.now .tt{color:var(--nav-brand)} .dd-item.now .ic{border-color:color-mix(in srgb,var(--nav-brand) 60%,transparent)} /* the torn bottom edge. Same paper stock AND same darkening veil as the bar, both at background-attachment:fixed so the texture and the veil register to the viewport — that is what makes the strip a seamless continuation of the bar rather than a lighter band under it. */ .nav .tstrip--nav{position:absolute;left:0;right:0;top:100%;margin-top:-1px; height:var(--nav-tear-h);pointer-events:none;z-index:5; background-color:var(--nav-bg); background-image:linear-gradient(rgba(5,7,10,.34),rgba(5,7,10,.52)),var(--we-paper-dark); background-size:cover;background-position:center;background-attachment:fixed; filter:drop-shadow(0 2px 3px rgba(0,0,0,.408)); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-position:0 0;mask-position:0 0; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C63.5%200.1%2C63.5%207.9%2C64.3%2020.4%2C61.3%2031.1%2C64.5%2055.6%2C67.8%2068.1%2C64.3%2075.9%2C65%2091.6%2C62.8%20118.1%2C67.8%20136.1%2C67.8%20157.1%2C62.3%20162.9%2C64.8%20171.6%2C65.3%20186.4%2C64.8%20198.4%2C62.5%20204.4%2C62.5%20208.4%2C64%20221.6%2C63%20244.4%2C64.8%20259.6%2C60%20266.9%2C63.3%20277.4%2C64%20283.4%2C65.8%20289.9%2C64%20305.4%2C65.8%20316.1%2C64.3%20329.9%2C64.3%20340.9%2C69.5%20354.4%2C66%20363.9%2C66.5%20367.4%2C65.5%20371.9%2C66.5%20386.1%2C65.5%20395.9%2C69.5%20408.6%2C65.3%20426.6%2C64%20436.1%2C67%20444.6%2C65.3%20458.9%2C70%20478.1%2C68%20489.1%2C65.5%20506.6%2C67.5%20520.9%2C66%20527.9%2C69.8%20531.9%2C70.3%20536.4%2C68%20550.1%2C65.8%20562.1%2C61.8%20571.4%2C65.3%20577.6%2C65%20585.4%2C70.3%20600.6%2C68.3%20605.6%2C66%20611.6%2C66.3%20620.1%2C64.5%20625.4%2C66%20640.6%2C64.8%20645.6%2C66.3%20663.4%2C67%20671.1%2C65.5%20681.1%2C67%20691.9%2C64.5%20697.1%2C66%20706.6%2C66%20714.9%2C70%20726.1%2C66.5%20744.6%2C65.8%20749.6%2C67.5%20761.4%2C67%20768.9%2C71.5%20780.9%2C69.3%20786.4%2C70.8%20793.9%2C68%20797.4%2C68%20804.6%2C70.8%20822.6%2C68%20827.9%2C68.8%20833.4%2C71.3%20844.1%2C71.3%20850.1%2C70.3%20857.6%2C65.5%20866.9%2C64.5%20878.6%2C68.5%20884.6%2C66.8%20891.1%2C67.5%20896.1%2C66%20901.1%2C68%20908.1%2C67.3%20912.6%2C69.3%20918.1%2C68.5%20921.1%2C69.8%20931.4%2C68.8%20945.4%2C65%20949.9%2C67.8%20961.1%2C66%20981.4%2C69.5%20992.1%2C68.5%20996.1%2C70.3%201006.1%2C70%201012.9%2C66.5%201018.4%2C66%201025.6%2C68.5%201038.4%2C68.5%201041.1%2C69.5%201048.6%2C66.8%201056.6%2C66.8%201063.6%2C69.3%201070.4%2C69.5%201079.4%2C71.8%201090.4%2C72%201096.9%2C70%201116.6%2C73.5%201127.9%2C69.8%201136.9%2C71.5%201147.4%2C70%201153.9%2C72%201168.6%2C66.8%201178.4%2C67.8%201191.4%2C73%201199.9%2C71%201240%2C71%201240%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C63.5%200.1%2C63.5%207.9%2C64.3%2020.4%2C61.3%2031.1%2C64.5%2055.6%2C67.8%2068.1%2C64.3%2075.9%2C65%2091.6%2C62.8%20118.1%2C67.8%20136.1%2C67.8%20157.1%2C62.3%20162.9%2C64.8%20171.6%2C65.3%20186.4%2C64.8%20198.4%2C62.5%20204.4%2C62.5%20208.4%2C64%20221.6%2C63%20244.4%2C64.8%20259.6%2C60%20266.9%2C63.3%20277.4%2C64%20283.4%2C65.8%20289.9%2C64%20305.4%2C65.8%20316.1%2C64.3%20329.9%2C64.3%20340.9%2C69.5%20354.4%2C66%20363.9%2C66.5%20367.4%2C65.5%20371.9%2C66.5%20386.1%2C65.5%20395.9%2C69.5%20408.6%2C65.3%20426.6%2C64%20436.1%2C67%20444.6%2C65.3%20458.9%2C70%20478.1%2C68%20489.1%2C65.5%20506.6%2C67.5%20520.9%2C66%20527.9%2C69.8%20531.9%2C70.3%20536.4%2C68%20550.1%2C65.8%20562.1%2C61.8%20571.4%2C65.3%20577.6%2C65%20585.4%2C70.3%20600.6%2C68.3%20605.6%2C66%20611.6%2C66.3%20620.1%2C64.5%20625.4%2C66%20640.6%2C64.8%20645.6%2C66.3%20663.4%2C67%20671.1%2C65.5%20681.1%2C67%20691.9%2C64.5%20697.1%2C66%20706.6%2C66%20714.9%2C70%20726.1%2C66.5%20744.6%2C65.8%20749.6%2C67.5%20761.4%2C67%20768.9%2C71.5%20780.9%2C69.3%20786.4%2C70.8%20793.9%2C68%20797.4%2C68%20804.6%2C70.8%20822.6%2C68%20827.9%2C68.8%20833.4%2C71.3%20844.1%2C71.3%20850.1%2C70.3%20857.6%2C65.5%20866.9%2C64.5%20878.6%2C68.5%20884.6%2C66.8%20891.1%2C67.5%20896.1%2C66%20901.1%2C68%20908.1%2C67.3%20912.6%2C69.3%20918.1%2C68.5%20921.1%2C69.8%20931.4%2C68.8%20945.4%2C65%20949.9%2C67.8%20961.1%2C66%20981.4%2C69.5%20992.1%2C68.5%20996.1%2C70.3%201006.1%2C70%201012.9%2C66.5%201018.4%2C66%201025.6%2C68.5%201038.4%2C68.5%201041.1%2C69.5%201048.6%2C66.8%201056.6%2C66.8%201063.6%2C69.3%201070.4%2C69.5%201079.4%2C71.8%201090.4%2C72%201096.9%2C70%201116.6%2C73.5%201127.9%2C69.8%201136.9%2C71.5%201147.4%2C70%201153.9%2C72%201168.6%2C66.8%201178.4%2C67.8%201191.4%2C73%201199.9%2C71%201240%2C71%201240%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E")} @media(max-width:880px){.nav-actions .nav-link,.nav-actions .dd{display:none}} @media(max-width:480px){.nav .brand img{height:28px;max-width:158px}.nav .btn-cta{padding:9px 14px;font-size:.82rem}} .dd-panel{ border:0;border-radius:0; background-color:#14120d; background-image:var(--we-paper-dark); background-size:cover;background-position:center; padding:10px 8px 46px; box-shadow:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 20px 34px rgba(0,0,0,.5)); -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C23.8%200.1%2C23.8%2023.4%2C23.8%2028.9%2C23%2039.6%2C23%2050.4%2C21.5%2070.6%2C21.5%2081.9%2C23.3%2096.4%2C24.3%2097.1%2C23.8%20103.9%2C22.8%20115.6%2C22.8%20122.1%2C21%20135.6%2C19.5%20146.9%2C19.8%20151.4%2C19.3%20156.1%2C19.5%20165.1%2C21.5%20175.9%2C21.3%20181.1%2C19.8%20191.1%2C21.5%20208.1%2C22%20216.4%2C22%20222.4%2C21%20234.9%2C20.5%20243.1%2C21%20246.4%2C20.5%20246.9%2C21%20249.1%2C20.3%20251.6%2C20.5%20255.6%2C19.8%20265.6%2C19.3%20268.9%2C19.5%20271.9%2C20.5%20273.1%2C21.5%20275.9%2C22%20283.9%2C22.5%20287.4%2C23.5%20291.9%2C23.3%20299.9%2C23.8%20340%2C23.8%20340%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"),linear-gradient(#000,#000); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%2048%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20points%3D%27-40%2C23.8%200.1%2C23.8%2023.4%2C23.8%2028.9%2C23%2039.6%2C23%2050.4%2C21.5%2070.6%2C21.5%2081.9%2C23.3%2096.4%2C24.3%2097.1%2C23.8%20103.9%2C22.8%20115.6%2C22.8%20122.1%2C21%20135.6%2C19.5%20146.9%2C19.8%20151.4%2C19.3%20156.1%2C19.5%20165.1%2C21.5%20175.9%2C21.3%20181.1%2C19.8%20191.1%2C21.5%20208.1%2C22%20216.4%2C22%20222.4%2C21%20234.9%2C20.5%20243.1%2C21%20246.4%2C20.5%20246.9%2C21%20249.1%2C20.3%20251.6%2C20.5%20255.6%2C19.8%20265.6%2C19.3%20268.9%2C19.5%20271.9%2C20.5%20273.1%2C21.5%20275.9%2C22%20283.9%2C22.5%20287.4%2C23.5%20291.9%2C23.3%20299.9%2C23.8%20340%2C23.8%20340%2C-40%20-40%2C-40%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E"),linear-gradient(#000,#000); -webkit-mask-repeat:repeat-x,no-repeat;mask-repeat:repeat-x,no-repeat; -webkit-mask-size:300px 48px,100% calc(100% - 46px); mask-size:300px 48px,100% calc(100% - 46px); -webkit-mask-position:bottom left,top;mask-position:bottom left,top; } /* numerals become little white paper tabs with ink on them — the house artifact — instead of navy gradient tiles with cyan type. */ .dd-item .ic{ background:#f4f2e9;border:0;border-radius:2px; color:#141109;font-family:"FLBold","Arial Black",sans-serif; font-size:.68rem;letter-spacing:0;rotate:-1.5deg; } .dd-item:nth-child(odd) .ic{rotate:1.2deg} /* the current-page row was a blue-tinted rounded slab, which reads as another soft UI card on paper. It becomes a torn-off paper marker instead: the row keeps the stock, the numeral tab goes full white, and the title takes the brand blue (legal here — the ground is dark). */ .dd-item.now{background:rgba(255,255,255,.06);border-radius:0} .dd-item.now .ic{background:#fff;color:#141109} .dd-item:hover{border-radius:0} /* ---- BATCH · nav CTA lost the hard offset shadow (V1-F5) ---- The de-glow pass replaced the brand's blur-free offset with a soft ambient `0 10px 30px -12px`, which BRAND-SYSTEM-INDEX §8 already flags as "worth revisiting" — it made the nav CTA the only button in the theme without the analog signature. Restored to the §8 nav-CTA spec exactly (2px 2px 0, and 3px 4px 0 on hover — the small-button values, not the larger `.button`'s). Radius and tilt unchanged. */ .btn-cta{box-shadow:2px 2px 0 rgba(0,0,0,.5)} .btn-cta:hover{box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(-.6deg) translateY(-1px)}