fix(ui): unify visual interaction styling

src/components/base/Link.astro

@@ -48,9 +48,11 @@ const relValue = relTokens.length > 0 ? relTokens.join(" ") : undefined
 <style>
   [data-link] {
     color: inherit;
+    cursor: pointer;
     transition:
       color var(--motion-duration-fast) var(--motion-ease),
-      text-decoration-color var(--motion-duration) var(--motion-ease);
+      text-decoration-color var(--motion-duration) var(--motion-ease),
+      background-size var(--motion-duration) var(--motion-ease);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -63,6 +65,7 @@ const relValue = relTokens.length > 0 ? relTokens.join(" ") : undefined
      native text decoration wraps cleanly and only needs a color transition. */
   [data-link][data-underline] {
     --underline: var(--muted-foreground);
+    --underline-wipe: currentColor;
     text-decoration-skip-ink: auto;
   }
 

src/components/publications/PubCard.astro

@@ -48,7 +48,7 @@ const hiddenAuthorsId = `publication-${slugify(pub.title)}-${pub.year ?? "unknow
     <CardHeader>
       {pub.award && <span class="publication-award">🏆 {pub.award}</span>}
       {pub.mainUrl ? (
-          <Link href={pub.mainUrl} external class="card-title-link">
+          <Link href={pub.mainUrl} external underline class="card-title-link">
             <CardTitle>{pub.title}</CardTitle>
           </Link>
         ) : (

src/components/timeline/TimelineItem.astro

@@ -9,8 +9,8 @@ const hasDate = Astro.slots.has("date")
 
 <li class:list={["timeline-item", className]}>
   <div class="timeline-marker" aria-hidden="true">
-    <div class="timeline-dot"></div>
     <div class="timeline-line"></div>
+    <div class="timeline-dot"></div>
   </div>
   <div class="timeline-content">
     {hasDate && (
@@ -38,8 +38,6 @@ const hasDate = Astro.slots.has("date")
   }
 
   .timeline-dot {
-    position: relative;
-    z-index: 1;
     inline-size: 0.5rem;
     block-size: 0.5rem;
     margin-block-start: 0.35rem;
@@ -50,9 +48,10 @@ const hasDate = Astro.slots.has("date")
 
   .timeline-line {
     position: absolute;
-    inset-block: 1rem 0;
+    inset-block: 0.5rem 0;
     inset-inline-start: 50%;
     border-inline-start: 2px dashed var(--muted);
+    transform: translateX(-50%);
   }
 
   .timeline-item:last-child .timeline-line {

src/lib/publications/utils.ts

@@ -419,7 +419,7 @@ function truncateAuthors(
   // Early return if no truncation needed
   if (totalAuthors <= maxFirst || totalAuthors <= maxFirst + maxLast) {
     return {
-      displayFirstAuthors: authors.join(", ") + (totalAuthors > 0 ? "," : ""),
+      displayFirstAuthors: authors.join(", "),
       hasMore: false,
       hiddenCount: 0,
       hiddenAuthors: "",

src/styles/card.css

@@ -81,9 +81,8 @@
     var(--celestial-surface) 58%,
     color-mix(in oklab, var(--accent) 5%, transparent)
   );
-  box-shadow:
-    0 0 0 1px color-mix(in oklab, var(--primary) 10%, transparent),
-    0 1rem 3rem -1.5rem color-mix(in oklab, var(--primary) 24%, transparent);
+  box-shadow: 0 1rem 3rem -1.5rem
+    color-mix(in oklab, var(--primary) 24%, transparent);
 }
 
 .card-overlay {
@@ -256,21 +255,16 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  [data-slot="card"]:hover::before {
+  [data-slot="card"][data-clickable]:hover::before {
     opacity: 1;
     animation: card-border-flow 2.4s linear infinite;
   }
 
-  [data-slot="card"]:hover {
-    border-color: color-mix(in oklab, var(--border) 82%, transparent);
-  }
-
   [data-slot="card"][data-clickable]:hover {
-    border-color: color-mix(in oklab, var(--primary) 34%, transparent);
+    border-color: transparent;
     background-color: color-mix(in oklab, var(--muted) 52%, transparent);
-    box-shadow:
-      0 0 0 1px color-mix(in oklab, var(--primary) 6%, transparent),
-      0 0.75rem 2rem -1.25rem color-mix(in oklab, var(--ring) 24%, transparent);
+    box-shadow: 0 0.75rem 2rem -1.25rem
+      color-mix(in oklab, var(--ring) 24%, transparent);
   }
 
   [data-slot="card"][data-clickable]:hover [data-slot="card-title"] {
@@ -295,7 +289,7 @@
     transition-duration: 0.01ms;
   }
 
-  [data-slot="card"]:hover::before {
+  [data-slot="card"][data-clickable]:hover::before {
     animation: none;
     background-position: 50% 0;
   }

src/styles/typography-inline.css

@@ -1,11 +1,4 @@
 prose-content {
-  a {
-    --underline: var(--muted-foreground);
-    --underline-wipe: currentColor;
-
-    color: var(--foreground);
-  }
-
   :is(strong, b) {
     color: var(--foreground);
     font-weight: var(--font-weight-medium);

src/styles/typography.css

@@ -40,6 +40,7 @@ body {
 }
 
 a {
+  cursor: pointer;
   text-decoration: underline;
   text-decoration-color: var(--underline, transparent);
   text-decoration-thickness: max(1px, 0.0625em);
@@ -126,3 +127,43 @@ prose-content {
     color: var(--prose-foreground);
   }
 }
+
+/* Text links share one readable default, accent hover/focus treatment, and
+   explicit active/visited states. Button-, badge-, and chip-shaped links keep
+   their component-specific decoration and colors. */
+prose-content a,
+a[data-link][data-underline] {
+  --underline: var(--muted-foreground);
+  --underline-wipe: currentColor;
+  color: var(--foreground);
+  text-decoration-line: underline;
+}
+
+prose-content a:visited,
+a[data-link][data-underline]:visited {
+  color: var(--foreground);
+}
+
+prose-content a:is(:hover, :focus-visible),
+a[data-link][data-underline]:is(:hover, :focus-visible) {
+  color: var(--accent);
+  text-decoration-line: none;
+  text-decoration-color: currentColor;
+}
+
+prose-content a:active,
+a[data-link][data-underline]:active {
+  color: var(--foreground);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  prose-content a,
+  a[data-link][data-underline] {
+    text-decoration-line: underline;
+  }
+
+  prose-content a:is(:hover, :focus-visible),
+  a[data-link][data-underline]:is(:hover, :focus-visible) {
+    text-decoration-line: underline;
+  }
+}