Introduce fixed --site-control-* tokens; polish footer & mobile nav

Author: arkkln

app/(home)/page.module.css

@@ -146,7 +146,7 @@
 .heroCtaRow {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--site-btn-gap);
+  gap: var(--site-control-gap);
 }
 
 /* Interaction-model row: between ~700 and 1075 the SVG does not fit;

components/controls/Button.module.css

@@ -13,9 +13,9 @@
 .btn {
   display: inline-flex;
   align-items: center;
-  gap: var(--site-btn-gap);
+  gap: var(--site-control-gap);
   min-height: var(--site-control-h);
-  padding: 0 var(--site-btn-pad-x);
+  padding: 0 var(--site-control-px);
   border-radius: var(--site-r-md);
   border: 1px solid var(--site-border-strong);
   background: var(--site-wash);
@@ -98,7 +98,7 @@
   display: inline-flex;
   align-items: center;
   min-height: var(--site-control-h);
-  padding: 0 var(--site-btn-pad-x);
+  padding: 0 var(--site-control-px);
   border-radius: var(--site-r-md);
   border: 1px dashed var(--site-rule-2);
   background: transparent;
@@ -114,9 +114,9 @@
 .repo {
   display: inline-flex;
   align-items: center;
-  gap: var(--site-btn-gap);
+  gap: var(--site-control-gap);
   min-height: var(--site-control-h);
-  padding: 0 var(--site-btn-pad-x);
+  padding: 0 var(--site-control-px);
   border-radius: var(--site-r-md);
   border: 1px solid var(--site-accent-line);
   background: var(--site-accent-wash);

components/layout/CtaRow.module.css

@@ -4,5 +4,5 @@
 .ctaRow {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--site-btn-gap);
+  gap: var(--site-control-gap);
 }

components/media/CommandLine.module.css

@@ -28,7 +28,7 @@
   display: flex;
   align-items: center;
   min-height: var(--site-control-h);
-  padding: 0 calc(var(--site-btn-pad-x) * 2.4) 0 var(--site-btn-pad-x);
+  padding: 0 calc(var(--site-control-px) * 2.4) 0 var(--site-control-px);
   min-width: 0;
 }
 

components/nav/FloatingNav.module.css

@@ -302,6 +302,6 @@
 
 .sheetIconRow {
   display: flex;
-  gap: var(--site-btn-gap);
+  gap: var(--site-control-gap);
   padding: var(--site-gap-normal) var(--site-gap-tight) 0;
 }

components/nav/FloatingNav.tsx

@@ -293,7 +293,7 @@ export function FloatingNav() {
           <Search size={18} aria-hidden />
         </button>
 
-        <ThemeToggle className={s.navIcon} />
+        <ThemeToggle className={`${s.navIcon} ${s.desktopOnly}`} />
 
         <button
           type="button"

components/nav/Footer.module.css

@@ -175,13 +175,18 @@
   min-width: 0;
 }
 
-.itemLink {
+/* Rich items — original footer treatment. Hover halo pads outward via a
+   matching negative margin so the tint doesn't shift layout; kept tight
+   (6px) so it doesn't bleed into neighboring rows/columns.
+   .itemStatic drops hover for rows without an href yet. */
+.itemLink,
+.itemStatic {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
-  padding: var(--site-gap-tight);
-  margin: calc(-1 * var(--site-gap-tight));
+  padding: 5px 10px;
+  margin: -5px -10px;
   border-radius: var(--site-r-md);
   text-decoration: none;
   color: inherit;

components/nav/Footer.tsx

@@ -89,7 +89,7 @@ export function Footer() {
                   {group.items.map((item) => (
                     <li key={item.href} className={s.item}>
                       {group.header === 'Use cases' ? (
-                        <span className={s.itemLink}>
+                        <span className={s.itemStatic}>
                           <span className={s.itemName}>{item.name}</span>
                           <span className={s.itemDesc}>{item.desc}</span>
                         </span>

design/tokens.css

@@ -78,12 +78,12 @@
   --site-pad-lg-y: calc(var(--site-u) * 2.75);
   --site-pad-lg-x: calc(var(--site-u) * 3.7);
 
-  --site-btn-pad-y:      calc(var(--site-u) * 0.75);
-  --site-btn-pad-x:      calc(var(--site-u) * 1.2);
-  --site-btn-gap:        calc(var(--site-u) * 0.75);
-  /* Shared control height — every inline control (Button, CommandLine, etc.)
-     that sits in the same row should render at this height. */
-  --site-control-h:      calc(var(--site-u) * 2.925);
+  /* Inline controls (button, input, cli, select, …) — viewport-independent
+     so CTAs and inputs stay legible at every width. Any control that sits
+     in the same row should read from this family. */
+  --site-control-h:      40px;
+  --site-control-px:     16px;
+  --site-control-gap:    10px;
   --site-list-item-gap:  calc(var(--site-u) * 0.75);
   --site-list-item-pad-y: calc(var(--site-u) * 0.35);
   --site-code-pad-y:     calc(var(--site-u) * 1);
@@ -313,6 +313,11 @@
 }
 @media (max-width: 640px) {
   :root { --site-fs-heading-1: var(--site-fs-12); }
+  :root {
+    --site-control-h:   36px;
+    --site-control-px:  14px;
+    --site-control-gap: 8px;
+  }
 }
 @media (max-width: 560px) {
   :root { --site-fs-display: var(--site-fs-13); }