Refine showcase actions and match the Two Days Early footer

artifacts/structured-liquidity/src/App.tsx

@@ -51,7 +51,7 @@ export function App() {
       <FooterCta />
       <Footer />
       <Tweaker />
-      <Toaster />
+      <Toaster className="site-toast-stack" />
     </ToastProvider>
   );
 }

artifacts/structured-liquidity/src/components/site/Footer.tsx

@@ -4,20 +4,18 @@ export function Footer() {
   const basePath = import.meta.env.BASE_URL;
 
   return (
-    <footer className="shell">
-      <div className="foot">
+    <footer className="shell structured-footer">
+      <div className="structured-footer-copy">
         <div className="brand">
           <Hypercube />
           <span className="name">Structured Liquidity</span>
         </div>
-        <div className="mono foot-legal">
-          <a href={`${basePath}attribution.txt`}>Free to use with attribution.</a>{" "}
-          <a href={basePath}>Structured</a> is an{" "}
-          <a href="https://interspace.ventures" target="_blank" rel="noopener">
-            Interspace Venture
-          </a>
-          . © 2026. Built at the speed of thought with AI.
-        </div>
+        <p>An open design language for clear, tactile interfaces.</p>
+        <small>© 2026 Structured Liquidity · <a href={`${basePath}attribution.txt`}>Free to use with attribution.</a></small>
+      </div>
+      <div className="structured-footer-system" aria-label="Site credits">
+        <p><a href="https://interspace.ventures">Interspace Ventures</a><span aria-hidden="true">×</span><a href="https://structured.glass">Structured Liquidity</a></p>
+        <a href="https://construct.page">A Construct page ↗</a>
       </div>
     </footer>
   );

artifacts/structured-liquidity/src/components/site/FooterCta.tsx

@@ -10,12 +10,12 @@ export function FooterCta() {
         <h2>
           Frame with <b>Structure</b>. Move with <b>Liquidity</b>. Communicate with <b>Clarity</b>.
         </h2>
-        <p className="lead" style={{ textAlign: "center" }}>
+        <p className="lead">
           Structured Liquidity is an open UI language: a complete kit of rigid containers and liquid
           glass, free to use with visible footer attribution. Adopt the three tenets, set your
           accent, and build something rigorous, tactile, and unmistakably clear.
         </p>
-        <div className="hero-cta" style={{ justifyContent: "center" }}>
+        <div className="hero-cta">
           <InstallButton />
           <a className="btn glassy" href="#components">
             <LayoutGrid />

artifacts/structured-liquidity/src/components/site/Showcase.tsx

@@ -2,7 +2,7 @@ import adopterRegistry from "@/adopters.json";
 import {
   PortfolioGrid, PortfolioCard, PortfolioCardMedia, PortfolioCardBody,
   PortfolioCardTags, PortfolioCardTag, PortfolioCardTitle,
-  PortfolioCardDescription, PortfolioCardAction,
+  PortfolioCardDescription,
 } from "@/components/ui/portfolio-card";
 
 type Lifecycle = "live" | "staging";
@@ -33,6 +33,7 @@ const SHOWCASE_IDS = [
   "exobase",
   "construct",
   "rampart",
+  "2daysearly",
 ] as const;
 const SHOWCASE = SHOWCASE_IDS.map((id) => ADOPTERS.find((project) => project.id === id)).filter(
   (project): project is Adopter => Boolean(project),
@@ -74,7 +75,7 @@ function ProjectCard({ project }: { project: Adopter }) {
         <span className="showcase-project-domain">{project.domain}</span>
         <PortfolioCardTitle>{project.name}</PortfolioCardTitle>
         <PortfolioCardDescription>{project.description}</PortfolioCardDescription>
-        {project.href ? <PortfolioCardAction>Visit {project.name}</PortfolioCardAction> : null}
+        {project.href ? <span className="sl-portfolio-card-action">Visit <span aria-hidden="true">↗</span></span> : null}
       </PortfolioCardBody>
     </PortfolioCard>
   );

artifacts/structured-liquidity/src/components/site/Tweaker.tsx

@@ -184,6 +184,7 @@ export function Tweaker() {
 
       <div
         className={"twk-panel" + (open ? " open" : "")}
+        hidden={!open}
         role="dialog"
         aria-label="Theme tweaks"
       >

artifacts/structured-liquidity/src/styles/40-inline.css

@@ -67,7 +67,7 @@
   @media (max-width:680px){.show-grid{grid-template-columns:1fr;}}
 
   /* Showcase uses the shared portfolio anatomy, with persistent copy and action. */
-  .showcase-projects { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; align-items:stretch; }
+  .showcase-projects { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; align-items:stretch; }
   .showcase-project { min-width:0; }
   .showcase-project-media { aspect-ratio:16/9; min-height:0; flex:0 0 auto; padding:0; overflow:hidden; }
   .showcase-project-media > img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
@@ -76,7 +76,7 @@
   .showcase-project .sl-portfolio-card-title { font-size:1.35rem; }
   .showcase-project .sl-portfolio-card-description { display:block; overflow:visible; font-size:.9rem; -webkit-line-clamp:unset; }
   .showcase-project .sl-portfolio-card-action { min-height:44px; }
-  @media (min-width:1440px){ .showcase-projects { grid-template-columns:repeat(3,minmax(0,1fr)); } }
+  @media (min-width:681px) and (max-width:1023px){ .showcase-projects { grid-template-columns:repeat(2,minmax(0,1fr)); } }
   @media (max-width:680px){ .showcase-projects { grid-template-columns:1fr; } }
 
   /* Per-component one-click install — a small ghost icon button injected into
@@ -124,6 +124,10 @@
     pointer-events:none;}
   .sl-fab-dock > *{pointer-events:auto;}
   .sl-fab-dock .sl-tweaks-fab{position:static;}
+  .sl-fab-dock .sl-tweaks-fab { background:var(--bg-2); backdrop-filter:none; box-shadow:2px 2px 0 var(--hard-shadow); }
+  .sl-fab-dock .sl-tweaks-fab:hover { box-shadow:3px 3px 0 var(--hard-shadow); }
+  .site-toast-stack { bottom:90px; }
+  .twk-panel[hidden] { display:none; }
   .sl-mode-fab svg{width:14px;height:14px;}
   /* Fixed-width label so the button doesn't resize when "Dark" <-> "Light" swap (mono = stable ch). */
   .sl-mode-lbl{display:inline-block;min-width:5.5ch;text-align:left;}
@@ -1416,6 +1420,17 @@ body {
 .cta-panel p {
   max-width: 60ch;
 }
+.cta-panel .hero-cta { justify-content:flex-start; }
+footer.structured-footer { display:flex; justify-content:space-between; align-items:flex-end; gap:2.5rem; padding-block:54px 100px; border-top:var(--border-w) solid var(--ink); text-align:left; }
+.structured-footer-copy > p { max-width:560px; margin:8px 0 0; font-size:1.1rem; }
+.structured-footer-copy small { display:block; margin-top:22px; color:var(--ink-dim); font-family:var(--mono); font-size:.65rem; }
+.structured-footer-system { display:grid; gap:14px; justify-items:end; }
+.structured-footer-system p { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0; }
+.structured-footer-system a { font-family:var(--mono); font-size:.65rem; font-weight:700; }
+@media (max-width:760px) {
+  footer.structured-footer { flex-direction:column; align-items:flex-start; }
+  .structured-footer-system { justify-items:start; }
+}
 .foot {
   border-top: 1px solid var(--ink);
 }