Move language switch out of the nav into a floating corner widget

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/layout.mjs

@@ -114,7 +114,7 @@ const NAV = [
   { label: 'Press', href: '/press/' },
 ];
 
-// EN · ES · AR. Plain links: each language is its own static page.
+// EN · ES · AR, floating bottom corner on every page. Plain links: each language is its own static page.
 function langSwitch(path, locale) {
   return `<nav class="lang-switch" aria-label="Language">${LOCALES.map((l) =>
     l === locale
@@ -148,7 +148,6 @@ function nav(path, locale) {
     <a class="brand" href="/" aria-label="Dylan Mazzei, home">${logo()}</a>
     <nav aria-label="Primary"><ul class="nav-links">${desktop}</ul></nav>
     <div class="nav-cta">
-      ${langSwitch(path, locale)}
       <button class="theme-btn" id="theme-btn" type="button" aria-label="Switch to dark mode">${icon('moon', 'moon')}${icon('sun', 'sun')}</button>
       <a class="btn btn-primary btn-sm" href="/contact/">START A CONVERSATION<span class="go">${icon('arrow')}</span></a>
       <button class="menu-btn" id="menu-btn" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="Open menu">${icon('menu')}</button>
@@ -156,7 +155,6 @@ function nav(path, locale) {
   </div>
   <div class="wrap mobile-menu" id="mobile-menu" hidden>
     <ul>${mobile}</ul>
-    ${langSwitch(path, locale)}
     <a class="btn btn-primary" href="/contact/">START A CONVERSATION<span class="go">${icon('arrow')}</span></a>
   </div>
 </header>`;
@@ -271,6 +269,7 @@ ${nav(path, locale)}
 ${body}
 </main>
 ${footer()}
+${langSwitch(path, locale)}
 <script src="/assets/site.js" defer></script>
 ${scripts}
 </body>

static/assets/styles.css

@@ -889,12 +889,15 @@ h1, h2, h3, h4 { font-weight: 600; }
 .dropdown { background: var(--nav-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--bd); }
 :root[data-theme="dark"] .dropdown { background: rgba(10, 14, 26, .96); }
 .theme-btn, .menu-btn { border-radius: 10px; border-color: var(--bd); background: var(--glass); }
-.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--bd); border-radius: 10px; background: var(--glass); flex: none; }
+.lang-switch {
-.lang-switch a, .lang-switch span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 7px; font: 600 11.5px/1 var(--font-sans); letter-spacing: 0.08em; color: var(--slate); transition: color .15s ease, background-color .15s ease; }
+  position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 90;
+  display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--bd); border-radius: 12px;
+  background: var(--nav-bg, var(--glass)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
+  box-shadow: 0 8px 28px rgba(2, 8, 23, .28);
+}
+.lang-switch a, .lang-switch span { display: inline-grid; place-items: center; min-width: 36px; height: 34px; padding: 0 8px; border-radius: 8px; font: 600 12px/1 var(--font-sans); letter-spacing: 0.08em; color: var(--slate); transition: color .15s ease, background-color .15s ease; }
 .lang-switch a:hover { color: var(--ink); }
 .lang-switch [aria-current] { color: var(--ink); background: rgba(26, 127, 255, .22); }
-.mobile-menu .lang-switch { display: flex; width: max-content; margin-top: 20px; }
-.mobile-menu .lang-switch a { padding: 0 6px; font-size: 12.5px; border-bottom: 0; }
 
 /* Real logo on dark, vector recreation on light */
 .logo-img { display: none; height: 30px; width: auto; }
@@ -956,7 +959,6 @@ h1, h2, h3, h4 { font-weight: 600; }
   .brand-word { font-size: 12px; }
   .logo-mark { width: 38px; }
   .nav-cta { gap: 6px; }
-  .nav-cta .lang-switch { display: none; }
   .hero { padding-top: 56px; }
   .page-hero { padding-block: 48px 56px; }
   .cluster { grid-template-columns: 1fr; margin-top: 48px; }