/* ============================================================================ LANGUY — THE ONE NAV (assets/languy-bar.css, was languy-dark.css) ---------------------------------------------------------------------------- Component styles ONLY. It declares no colour of its own: the palette lives in /assets/languy-tokens.css, the single :root on the funnel (founder lock 2026-09-22 — SKY + LEAF ON LIGHT PAPER, dark surfaces retired). The old :root here was the third copy of the ground and is deleted, not aliased. Load languy-tokens.css BEFORE this file. ========================================================================== */ /* ============================================================================= THE ONE NAV · .lgy-bar The homepage's header, extracted verbatim so every surface wears it. Emblem + letterspaced wordmark on the left, at most ONE action on the right. ========================================================================== */ .lgy-bar{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .24s cubic-bezier(.16,1,.3,1); } @supports not (background:color-mix(in srgb, red 50%, transparent)){ .lgy-bar{ background:rgba(251,251,250,.82); } } .lgy-bar.scrolled{ border-bottom-color:var(--line); } .lgy-bar-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; max-width:var(--maxw,1080px); margin:0 auto; padding:0 var(--pad,22px); } /* THE EMBLEM — founder-locked 2026-07-29: the emblem IS the globe wearing pixelated sunglasses. Nothing else. It is the red-background social avatar with the red taken away (the red is social-media-only and never reaches the site). This OVERRULES the earlier ruling that the globe-with-shades was "a character illustration for editorial use, never a logo lockup" — that ruling is dead, and this comment used to assert it. ONE geometry, tiered by RENDERED size (measurements: brand/SIZE-TRUTH.md): <=24px brand/emblem-globe-micro-black.svg wide bridge, land fattened 32-48px brand/emblem-globe-heavy-black.svg >=64px images/mascot-candidates/emblem-flow-A-cutout.png (the render) This nav renders at 22px, so it wears the MICRO tier. The vector is traced from the render's own pixels (brand/trace-continents.py), so the small mark and the big one are one being, not two cousins. RETIRED: brand/emblem-heavy.svg — the abstract broken ring with a bar that used to sit here. Measured 0% land at 16/22/32/64/140px, so it never read as his globe at any size. Kept on disk for the git trail; referenced by nothing. */ /* THE TOUCH FLOOR, in the component that owns the geometry (2026-09-22, phase 3e). Both of these are LINKS a thumb is meant to hit — home, and the way back — and both measured 22px and 38px tall across the funnel (verify round 3, token row 23). The bar is min-height:60px, so a 44px hit box fits inside it without moving a single pixel of what is drawn; only the tappable area grows. */ .lgy-mark{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--ink); text-decoration:none; font-weight:800; } .lgy-mark svg, .lgy-mark img.lgy-emblem{ width:22px; height:22px; flex:none; } .lgy-mark b{ font-family:'Archivo',-apple-system,system-ui,sans-serif; font-weight:800; font-size:15px; letter-spacing:.16em; text-transform:uppercase; } .lgy-bar-right{ display:flex; align-items:center; gap:10px; } /* ONE action. Matches the homepage's "Enter free" pill exactly. */ .lgy-go{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--nav-cta-height); padding:0 17px; border-radius:var(--cta-radius); background:var(--action); color:var(--on-action); text-decoration:none; font-family:var(--disp); font-size:15px; font-weight:var(--h1-weight); white-space:nowrap; border:0; cursor:pointer; transition:background .24s cubic-bezier(.16,1,.3,1); } .lgy-go:hover{ background:var(--action-hi); } .lgy-go:focus-visible{ outline:2px solid var(--action-text); outline-offset:3px; } /* The way back to the world — a quiet ghost link, never a second primary. */ .lgy-back{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--ink-2); text-decoration:none; font-size:var(--fs-body); font-weight:600; padding:0 6px; } .lgy-back:hover{ color:var(--ink); } /* ONE PROGRESS VOCABULARY — the word is the only currency (world.css law 2). No XP, no levels, no gems. A player with zero words sees nothing, never a "0". */ .lgy-words{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--earned-soft); border:1px solid rgba(22,163,74,.32); color:var(--earned); font-size:13px; font-weight:700; white-space:nowrap; } .lgy-words[hidden]{ display:none !important; } .lgy-words svg{ width:12px; height:12px; flex:none; } @media (max-width:420px){ .lgy-mark b{ font-size:13.5px; letter-spacing:.13em; } .lgy-go{ font-size:13.5px; padding:0 14px; } /* 360-390px: keep "✦ 3" and drop the word "words" — free.html already does exactly this at this breakpoint, so the two bars stay identical. The way back must survive the squeeze; the label is what gives. */ .lgy-words .lbl{ display:none; } .lgy-words{ padding:6px 10px; gap:5px; } } /* 2026-09-22 (phase 3e): this breakpoint was 360px, which meant that at exactly 360 — the Samsung width the BLIND-SPOT PATCH made the MINIMUM of the mobile matrix — the word LANGUY vanished and the header carried no brand name at all, against the token that says the brand name is on every page. Measured at 360 the bar needs ~110px for emblem + wordmark and ~110px for its one action inside a 320px content box, so there was never a squeeze to relieve there. The drop now happens below 340, where it genuinely is tight. Verified at 360 on /, /free, /products and the kit: page scrollWidth == clientWidth on all four. */ @media (max-width:339px){ .lgy-mark b{ display:none; } /* emblem alone still reads as the mark */ } @media (prefers-reduced-motion:reduce){ .lgy-bar,.lgy-go,.lgy-back{ transition:none; } }