footer: restore the single-row terminal footer

src/css/custom.css

@@ -2,9 +2,10 @@
  * Erigon brand colors — light and dark theme.
  * Primary: #1F9D3E (Zilkworm Green), Hover: #1C8E38
  * The green body theme is Zilkworm-specific — a deliberate deviation from
- * the shared Erigon palette introduced in PRs #12 / #16. The corporate
- * footer stays Erigon Orange #EF7716. Note that docusaurus-design-spec.md
- * still specifies orange site-wide and has not yet been amended.
+ * the shared Erigon palette introduced in PRs #12 / #16. In the footer, green
+ * drives the social and legal hovers; only the brand lockup hovers Erigon
+ * Orange, via the footer-scoped --footer-accent. See design spec §6.2 for this
+ * site's terminal footer variant.
  * Light bg: #FFFFFF, Dark bg: #0A0A0A
  * Fonts: Montserrat ExtraBold (headings), Nunito Sans (body),
  *        Quantify 700 (brand wordmark — navbar title + footer brand, see
@@ -415,35 +416,115 @@ details.alert.alert--info summary {
   background-color: #000000;
 }
 
-/* ─── Footer social pill buttons ─────────────────────────────────────────── */
+/* ─── Footer accent + interactive states ─────────────────────────────────── */
+/* Corporate orange for the footer's brand-lockup hover. Declared on `footer`,
+   not :root, so it is genuinely scoped to the footer rather than merely named
+   that way — --brand-accent is the site-wide Zilkworm Green and must not be
+   touched. Flat across colour modes: #EF7716 reads on both footer surfaces. */
+/* Surface matches the other docs sites (design spec §6.1): white in light mode,
+   black in dark — not the Infima surface grey. Declared on `footer` alongside
+   the accent so the whole footer palette stays scoped to it. */
+footer {
+  --footer-accent: #EF7716;
+  --footer-bg: #FFFFFF;
+  --footer-fg: #000000;
+}
+[data-theme='dark'] footer {
+  --footer-bg: #000000;
+  --footer-fg: #FFFFFF;
+}
+
+/* Interactive states live here, not in React onMouseEnter/onMouseLeave. Those
+   only fire for a mouse, so keyboard users tabbing the footer got no accent
+   state and no focus indicator. Socials and legal links hover Zilkworm Green
+   (the terminal identity); only the brand lockup hovers corporate orange. */
+.footer-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.footer-brand:hover,
+.footer-brand:focus-visible {
+  color: var(--footer-accent);
+  /* Infima's `a:hover` sets text-decoration: underline and outranks the base
+     class on specificity, so it has to be cleared on the state too. */
+  text-decoration: none;
+}
 
-.footer-social-btn {
+.footer-socials {
   display: flex;
+  flex-direction: row;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+.footer-social {
+  display: inline-flex;
   align-items: center;
-  gap: 0.65rem;
-  padding: 0.55rem 0.85rem;
-  border-radius: 8px;
-  border: 1px solid rgba(255,255,255,0.15);
-  color: rgba(255,255,255,0.65) !important;
-  text-decoration: none !important;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: 0;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  background: transparent;
+  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
 }
-.footer-social-btn:hover {
-  color: #EF7716 !important;
-  border-color: #EF7716 !important;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(239,119,22,0.15);
+.footer-social:hover,
+.footer-social:focus-visible {
+  color: var(--brand-accent);
+  border-color: var(--brand-accent);
+  /* Fallback first: color-mix() is Chrome/Edge 111+, Firefox 113+, Safari 16.2+.
+     Older engines keep the flat green tint instead of losing it silently. */
+  background-color: rgba(31, 157, 62, 0.12);
+  background-color: color-mix(in srgb, var(--brand-accent) 12%, transparent);
+}
+
+.footer-legal {
+  font-size: 0.8rem;
+  /* emphasis-700, not -600: on the white light-mode surface -600 measures
+     3.06:1, below WCAG AA's 4.5:1 for this 0.8rem text. -700 gives 5.72:1. */
+  color: var(--ifm-color-emphasis-700);
+  font-family: var(--ifm-font-family-monospace);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.footer-legal:hover,
+.footer-legal:focus-visible {
+  color: var(--brand-accent);
+  text-decoration: none;
+}
+
+.footer-brand:focus-visible,
+.footer-social:focus-visible,
+.footer-legal:focus-visible {
+  outline: 2px solid var(--brand-accent);
+  outline-offset: 2px;
 }
 
 /* ─── Footer responsive (mobile) ────────────────────────────────────────── */
 
 @media (max-width: 768px) {
+  /* The footer top row is flex, not a grid — stack it. grid-template-columns
+     here was a no-op left over from the five-column footer, so the row never
+     actually stacked on mobile. */
   .footer-top-grid {
-    grid-template-columns: 1fr !important;
-    padding: 2.5rem 1.5rem 2rem !important;
-    gap: 2.5rem !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    padding: 1.5rem 1.5rem 1rem !important;
+    gap: 1rem !important;
+  }
+
+  /* Socials are pushed right by margin-left:auto on desktop; reset it so they
+     align with the brand once stacked. Targets the dedicated class, not
+     > div:last-child, which broke if another div were appended. */
+  .footer-socials {
+    margin-left: 0;
   }
 
   .footer-bottom-bar {

src/theme/Footer/index.tsx

@@ -25,167 +25,101 @@ const IconLinkedIn = () => (
   </svg>
 );
 
+/* Monospace throughout — the footer's terminal motif, matching the site's
+   monospace navbar/sidebar/TOC. The Quantify wordmark is the one exception. */
+const MONO = 'var(--ifm-font-family-monospace)';
+/* -700 not -600: -600 is only 3.06:1 on the light surface (AA needs 4.5:1). */
+const FINE_BASE = 'var(--ifm-color-emphasis-700)';
+const ACCENT = 'var(--brand-accent)';
+const BOX_BORDER = 'var(--ifm-toc-border-color)';
+
 export default function Footer(): React.ReactElement {
   const logoUrl = useBaseUrl('/img/logo-icon-orange.png');
 
   return (
-    <footer style={{background: '#000000', color: '#ffffff', fontFamily: "'Nunito Sans', sans-serif"}}>
-      {/* Top section */}
+    <footer style={{
+      background: 'var(--footer-bg)',
+      color: 'var(--footer-fg)',
+      borderTop: '2px solid var(--ifm-color-primary)',
+      fontFamily: MONO,
+    }}>
+      {/* Top section — single horizontal line */}
       <div className="footer-top-grid" style={{
         maxWidth: '1280px',
         margin: '0 auto',
-        padding: '3.5rem 2rem 2.5rem',
-        display: 'grid',
-        gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr',
-        gap: '2rem',
+        padding: '1.25rem 2rem 0.75rem',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '1.25rem',
+        flexWrap: 'wrap',
       }}>
 
-        {/* Brand column */}
-        <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
-          <div style={{display: 'flex', alignItems: 'center', gap: '0.6rem'}}>
-            <img src={logoUrl} alt="Erigon" style={{height: '32px', width: 'auto'}} />
-            <span style={{fontFamily: "'Quantify', sans-serif", fontWeight: 700, fontSize: '1rem', letterSpacing: '0.04em'}}>erigon.tech</span>
-          </div>
-          <p style={{
-            fontSize: '0.875rem',
-            color: 'rgba(255,255,255,0.55)',
-            lineHeight: 1.6,
-            margin: 0,
-            maxWidth: '240px',
-          }}>
-            Building the future on the efficient software frontier.
-          </p>
-          <p style={{
-            fontSize: '0.8rem',
-            color: 'rgba(255,255,255,0.35)',
-            lineHeight: 1.6,
-            margin: 0,
-          }}>
-            Erigon Technologies AG<br />
-            Dammstrasse 16<br />
-            6300 Zug, Switzerland
-          </p>
-        </div>
+        {/* Brand lockup — image logo + wordmark, links to the corporate home
+            page. One anchor wraps both so it is a single hit target. */}
+        <a href="https://erigon.tech" target="_blank" rel="noopener noreferrer"
+          aria-label="Erigon home page" className="footer-brand">
+          <img src={logoUrl} alt="Erigon" style={{height: '32px', width: 'auto'}} />
+          <span style={{fontFamily: "'Quantify', sans-serif", fontWeight: 700, fontSize: '1rem', letterSpacing: '0.04em'}}>erigon.tech</span>
+        </a>
 
-        {/* Products column */}
-        <div>
-          <p style={{fontFamily: "'Montserrat', sans-serif", fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#f0f0f0', margin: '0 0 1rem'}}>Products</p>
-          <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem'}}>
-            {[
-              {label: 'Erigon Client', href: 'https://erigon.tech/products/erigon-client/'},
-              {label: 'Zilkworm', href: 'https://erigon.tech/products/zilkworm/'},
-              {label: 'Cocoon', href: 'https://erigon.tech/products/cocoon/'},
-              {label: 'R&D', href: 'https://erigon.tech/products/rnd/'},
-            ].map(({label, href}) => (
-              <li key={label}>
-                <a href={href} target="_blank" rel="noopener noreferrer" style={{color: 'rgba(255,255,255,0.65)', textDecoration: 'none', fontSize: '0.9rem', transition: 'color 0.15s'}}
-                  onMouseEnter={e => (e.currentTarget.style.color = '#EF7716')}
-                  onMouseLeave={e => (e.currentTarget.style.color = 'rgba(255,255,255,0.65)')}>
-                  {label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
+        {/* Blurb */}
+        <p style={{
+          fontSize: '0.875rem',
+          color: 'var(--ifm-color-emphasis-700)',
+          lineHeight: 1.6,
+          margin: 0,
+          maxWidth: '360px',
+        }}>
+          Building the future on the efficient software frontier.
+        </p>
 
-        {/* Developers column */}
-        <div>
-          <p style={{fontFamily: "'Montserrat', sans-serif", fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#f0f0f0', margin: '0 0 1rem'}}>Developers</p>
-          <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem'}}>
-            {[
-              {label: 'Zilkworm Docs ↗', href: 'https://zilkworm.erigon.tech'},
-              {label: 'Cocoon Docs ↗', href: 'https://cocoon.erigon.tech'},
-              {label: 'Erigon Docs ↗', href: 'https://docs.erigon.tech'},
-              {label: 'Blog', href: 'https://erigon.tech/blog/'},
-            ].map(({label, href}) => (
-              <li key={label}>
-                <a href={href} target="_blank" rel="noopener noreferrer" style={{color: 'rgba(255,255,255,0.65)', textDecoration: 'none', fontSize: '0.9rem', transition: 'color 0.15s'}}
-                  onMouseEnter={e => (e.currentTarget.style.color = '#EF7716')}
-                  onMouseLeave={e => (e.currentTarget.style.color = 'rgba(255,255,255,0.65)')}>
-                  {label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        {/* Company column */}
-        <div>
-          <p style={{fontFamily: "'Montserrat', sans-serif", fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#f0f0f0', margin: '0 0 1rem'}}>Company</p>
-          <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem'}}>
-            {[
-              {label: 'About Us', href: 'https://erigon.tech/about/'},
-              {label: 'Services', href: 'https://erigon.tech/services/'},
-              {label: 'Contact', href: 'https://erigon.tech/contact/'},
-              {label: 'Privacy Policy', href: 'https://erigon.tech/privacy/'},
-              {label: 'Cookie Policy', href: 'https://erigon.tech/cookies/'},
-            ].map(({label, href}) => (
-              <li key={label}>
-                <a href={href} target="_blank" rel="noopener noreferrer" style={{color: 'rgba(255,255,255,0.65)', textDecoration: 'none', fontSize: '0.9rem', transition: 'color 0.15s'}}
-                  onMouseEnter={e => (e.currentTarget.style.color = '#EF7716')}
-                  onMouseLeave={e => (e.currentTarget.style.color = 'rgba(255,255,255,0.65)')}>
-                  {label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        {/* Community column */}
-        <div>
-          <p style={{fontFamily: "'Montserrat', sans-serif", fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#f0f0f0', margin: '0 0 1rem'}}>Community</p>
-          <div style={{display: 'flex', flexDirection: 'column', gap: '0.5rem'}}>
-            {[
-              {label: 'X / Twitter', href: 'https://x.com/erigoneth', Icon: IconX},
-              {label: 'Discord', href: 'https://dsc.gg/erigon', Icon: IconDiscord},
-              {label: 'GitHub', href: 'https://github.com/erigontech', Icon: IconGitHub},
-              {label: 'LinkedIn', href: 'https://www.linkedin.com/company/erigon/', Icon: IconLinkedIn},
-            ].map(({label, href, Icon}) => (
-              <a key={label} href={href} target="_blank" rel="noopener noreferrer" className="footer-social-btn">
-                <Icon />
-                {label}
-              </a>
-            ))}
-          </div>
+        {/* Social icon row — right aligned */}
+        <div className="footer-socials">
+          {[
+            {label: 'X / Twitter', href: 'https://x.com/erigoneth', Icon: IconX},
+            {label: 'Discord', href: 'https://dsc.gg/erigon', Icon: IconDiscord},
+            {label: 'GitHub', href: 'https://github.com/erigontech', Icon: IconGitHub},
+            {label: 'LinkedIn', href: 'https://www.linkedin.com/company/erigon/', Icon: IconLinkedIn},
+          ].map(({label, href, Icon}) => (
+            <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label} title={label}
+              className="footer-social">
+              <Icon />
+            </a>
+          ))}
         </div>
       </div>
 
       {/* Divider */}
-      <div style={{borderTop: '1px solid rgba(255,255,255,0.08)', margin: '0 2rem'}} />
+      <div style={{borderTop: `1px solid ${BOX_BORDER}`, margin: '0.25rem 2rem'}} />
 
       {/* Bottom bar */}
       <div className="footer-bottom-bar" style={{
         maxWidth: '1280px',
         margin: '0 auto',
-        padding: '1.25rem 2rem',
+        padding: '0.7rem 2rem',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         flexWrap: 'wrap',
         gap: '0.75rem',
       }}>
-        <span style={{fontSize: '0.8rem', color: 'rgba(255,255,255,0.35)'}}>
-          © {new Date().getFullYear()} Erigon Technologies AG. All rights reserved.
+        <span style={{fontSize: '0.8rem', color: FINE_BASE, fontFamily: MONO}}>
+          <span style={{color: ACCENT, fontWeight: 700}}>$</span>{' '}
+          © {new Date().getFullYear()} Erigon Technologies AG. All rights reserved.{' '}
+          <span style={{color: ACCENT, fontWeight: 700}}>▊</span>
         </span>
         <div style={{display: 'flex', alignItems: 'center', gap: '1.5rem', flexWrap: 'wrap'}}>
           {[
             {label: 'Privacy Policy', href: 'https://erigon.tech/privacy/'},
             {label: 'Cookie Policy', href: 'https://erigon.tech/cookies/'},
-            {label: 'Contact', href: 'https://erigon.tech/contact/'},
+            {label: 'About Us', href: 'https://erigon.tech/about/'},
           ].map(({label, href}) => (
             <a key={label} href={href} target="_blank" rel="noopener noreferrer"
-              style={{fontSize: '0.8rem', color: 'rgba(255,255,255,0.35)', textDecoration: 'none', transition: 'color 0.15s'}}
-              onMouseEnter={e => (e.currentTarget.style.color = '#EF7716')}
-              onMouseLeave={e => (e.currentTarget.style.color = 'rgba(255,255,255,0.35)')}>
+              className="footer-legal">
               {label}
             </a>
           ))}
-          <a href="mailto:hello@erigon.tech"
-            style={{fontSize: '0.8rem', color: 'rgba(255,255,255,0.35)', textDecoration: 'none', transition: 'color 0.15s'}}
-            onMouseEnter={e => (e.currentTarget.style.color = '#EF7716')}
-            onMouseLeave={e => (e.currentTarget.style.color = 'rgba(255,255,255,0.35)')}>
-            hello@erigon.tech
-          </a>
         </div>
       </div>
     </footer>