fix: Refine design — tighten line-height, animate FAQ accordion, improve accessibility

- Reduce body text line-height from 200% to 185% across all components
- Replace FAQ hidden toggle with CSS grid-rows transition for smooth
accordion
- Improve muted-foreground contrast (light: 42%→38%, dark: 50%→58%)
- Add skip-to-content link and #main landmark on all pages
- Remove mobile install panel, center GitHub/Discord buttons on mobile
- Remove hero entrance animations — content renders immediately
- Remove unused text-gradient-brand utility and !important overrides
- Update Docs nav link to point directly to README.md
- Rewrite supported technology copy to focus on stored injections and
JPA

Author: misonijnik

src/components/AnimatedHero.tsx

@@ -39,16 +39,16 @@ export function AnimatedHero() {
         The open source taint analysis engine for the AI era
       </h1>
 
-      <p className="mt-5 font-mono text-[15px] leading-[200%] text-muted-foreground sm:max-w-[82%] lg:text-base lg:mt-6">
+      <p className="mt-5 font-mono text-[15px] leading-[185%] text-muted-foreground sm:max-w-[82%] lg:text-base lg:mt-6">
         Formal inter-procedural taint analysis — finds what pattern matching engines miss, enacts what LLM agents discover as rules, scales where neither can alone.
       </p>
 
-      <div className="mt-8 flex gap-3 sm:hidden">
+      <div className="mt-8 flex justify-center gap-3 sm:hidden">
         <a
           href="https://github.com/seqra/opentaint"
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center gap-2 rounded border border-border bg-secondary/50 px-4 py-2.5 font-mono text-xs uppercase tracking-[0.14em] text-foreground/80 transition-colors hover:border-border-strong hover:text-foreground"
+          className="inline-flex items-center gap-2 rounded border border-border bg-secondary/50 px-4 min-h-11 font-mono text-xs uppercase tracking-[0.14em] text-foreground/80 transition-colors hover:border-border-strong hover:text-foreground"
         >
           <svg role="img" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="currentColor" aria-hidden="true">
             <path d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
@@ -59,7 +59,7 @@ export function AnimatedHero() {
           href="https://discord.gg/6BXDfbP4p9"
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center gap-2 rounded border border-border bg-secondary/50 px-4 py-2.5 font-mono text-xs uppercase tracking-[0.14em] text-foreground/80 transition-colors hover:border-border-strong hover:text-foreground"
+          className="inline-flex items-center gap-2 rounded border border-border bg-secondary/50 px-4 min-h-11 font-mono text-xs uppercase tracking-[0.14em] text-foreground/80 transition-colors hover:border-border-strong hover:text-foreground"
         >
           <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="currentColor" aria-hidden="true">
             <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.947 2.418-2.157 2.418z" />

src/components/astro/BlogPostView.astro

@@ -74,7 +74,7 @@ const formattedDate = new Date(post.date).toLocaleDateString("en-US", {
   </section>
 
   <section class="page-section">
-    <div class="blog-prose max-w-none break-words font-mono text-[15px] leading-[190%] text-foreground/85 lg:text-base">
+    <div class="blog-prose max-w-none break-words font-mono text-[15px] leading-[185%] text-foreground/85 lg:text-base">
       <slot />
     </div>
   </section>

src/components/astro/FAQ.astro

@@ -71,22 +71,26 @@ const faqItems = [
           </svg>
           <span>{item.question}</span>
         </button>
-        <div id={`faq-answer-${index}`} class="hidden pb-4 pl-4 font-mono text-[15px] leading-[200%] text-muted-foreground lg:text-base lg:pb-5 lg:pl-5" data-faq-answer>
-          {item.isContact ? (
-            <span>
-              Ask us on{" "}
-              <a
-                href="https://discord.gg/6BXDfbP4p9"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-primary underline transition-colors hover:text-foreground"
-              >
-                Discord
-              </a>
-            </span>
-          ) : (
-            item.answer
-          )}
+        <div id={`faq-answer-${index}`} class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-250 ease-out" data-faq-answer>
+          <div class="overflow-hidden">
+            <div class="pb-4 pl-4 font-mono text-[15px] leading-[185%] text-muted-foreground lg:text-base lg:pb-5 lg:pl-5">
+              {item.isContact ? (
+                <span>
+                  Ask us on{" "}
+                  <a
+                    href="https://discord.gg/6BXDfbP4p9"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-primary underline transition-colors hover:text-foreground"
+                  >
+                    Discord
+                  </a>
+                </span>
+              ) : (
+                item.answer
+              )}
+            </div>
+          </div>
         </div>
       </li>
     ))}
@@ -103,7 +107,9 @@ const faqItems = [
       const isOpen = btn.getAttribute("aria-expanded") === "true";
       const chevron = btn.querySelector("[data-faq-chevron]");
       btn.setAttribute("aria-expanded", String(!isOpen));
-      answer.classList.toggle("hidden", isOpen);
+      if (answer instanceof HTMLElement) {
+        answer.style.gridTemplateRows = !isOpen ? "1fr" : "0fr";
+      }
       item.classList.toggle("border-transparent", isOpen);
       item.classList.toggle("border-primary", !isOpen);
       if (chevron) chevron.classList.toggle("rotate-90", !isOpen);

src/components/astro/SiteHeader.astro

@@ -2,7 +2,7 @@
 const navItems = [
   { href: "/", label: "Home" },
   { href: "/blog", label: "Blog" },
-  { href: "https://github.com/seqra/opentaint/tree/main/docs", label: "Docs", external: true },
+  { href: "https://github.com/seqra/opentaint/blob/main/docs/README.md", label: "Docs", external: true },
 ];
 ---
 

src/components/astro/SupportedTechnology.astro

@@ -10,7 +10,12 @@
     <img src="/pictures/gitlab-logo.svg" alt="GitLab" class="h-10 w-10 sm:h-14 sm:w-14 lg:h-16 lg:w-16" />
   </div>
 
-  <h2 class="mt-10 section-title lg:mt-12">The most thorough taint analysis engine for Spring apps</h2>
+  <p class="section-subtitle mt-8 font-mono lg:mt-10">
+    The most thorough taint analysis engine for Spring apps.
+  </p>
+  <p class="section-subtitle font-mono">
+    Tracks taint through JPA persistence layers to catch stored injections that other tools miss.
+  </p>
 
   <h2 class="mt-10 section-title lg:mt-12">Roadmap</h2>
   <div class="mt-4 flex flex-wrap items-center justify-center gap-y-5 gap-x-8 sm:gap-10 lg:mt-6 lg:gap-12">

src/components/astro/WhatIsOpenTaint.astro

@@ -32,7 +32,7 @@ const features = [
 
   <ul class="mt-8 space-y-3 lg:mt-10 lg:space-y-4">
     {features.map((feature) => (
-      <li class="flex gap-3 font-mono text-[15px] leading-[200%] lg:text-base lg:gap-4">
+      <li class="flex gap-3 font-mono text-[15px] leading-[185%] lg:text-base lg:gap-4">
         <span class="mt-[0.65em] h-1.5 w-1.5 shrink-0 rounded-full bg-primary" aria-hidden="true"></span>
         <div>
           <strong class="feature-title">{feature.title}</strong>

src/index.css

@@ -19,7 +19,7 @@
     --secondary: 215 10% 94%;
     --secondary-foreground: 215 10% 10%;
     --muted: 215 10% 94%;
-    --muted-foreground: 215 8% 42%;
+    --muted-foreground: 215 8% 38%;
     --accent: 0 72% 46%;
     --accent-foreground: 0 0% 100%;
     --destructive: 12 80% 46%;
@@ -59,7 +59,7 @@
     --secondary: 215 8% 11%;
     --secondary-foreground: 215 6% 80%;
     --muted: 215 8% 11%;
-    --muted-foreground: 215 6% 50%;
+    --muted-foreground: 215 6% 58%;
     --accent: 0 72% 52%;
     --accent-foreground: 0 0% 100%;
     --destructive: 12 80% 50%;
@@ -219,7 +219,7 @@
   }
 
   .section-subtitle {
-    @apply mt-3 font-mono leading-[200%] text-muted-foreground lg:mt-4;
+    @apply mt-3 font-mono leading-[185%] text-muted-foreground lg:mt-4;
     font-size: 15px;
   }
 
@@ -292,16 +292,7 @@
     border-radius: 999px;
   }
 
-  .text-gradient-brand {
-    background-image: linear-gradient(
-      135deg,
-      hsl(var(--brand)),
-      hsl(var(--foreground))
-    );
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-  }
+
 }
 
 .expressive-code .copy .feedback {

src/layouts/BaseLayout.astro

@@ -81,6 +81,7 @@ const dataBlocks = Array.isArray(structuredData) ? structuredData : [structuredD
     ))}
   </head>
   <body class="min-h-screen bg-background text-foreground antialiased">
+    <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:rounded focus:bg-primary focus:px-4 focus:py-2 focus:font-mono focus:text-sm focus:text-primary-foreground">Skip to content</a>
     <slot />
   </body>
 </html>

src/pages/404.astro

@@ -7,7 +7,7 @@ import LandingFooter from "@/components/astro/LandingFooter.astro";
 <BaseLayout title="Page not found" description="The requested page could not be found." noIndex={true}>
   <div class="min-h-screen bg-background flex flex-col">
     <SiteHeader />
-    <main class="flex-1 pt-16">
+    <main id="main" class="flex-1 pt-16">
       <div class="page-container">
         <section class="page-section flex items-center justify-center" style="min-height: calc(100vh - 4rem - 10rem);">
           <div class="mx-auto max-w-2xl text-center">

src/pages/blog/[slug].astro

@@ -64,7 +64,7 @@ const blogPostingSchema = {
 <BaseLayout title={post.title} description={post.description} canonical={post.canonicalUrl} image={`${siteConfig.url}/og/${post.slug}.png`} keywords={post.keywords} structuredData={blogPostingSchema}>
   <div class="min-h-screen bg-background flex flex-col">
     <SiteHeader />
-    <main class="flex-1 pt-28 xl:pt-16">
+    <main id="main" class="flex-1 pt-28 xl:pt-16">
       <div class="page-container min-w-0">
         <div class="xl:grid xl:grid-cols-[1fr_14rem] xl:gap-x-14">
           <div class="min-w-0">