contact page, legal pages and category page

resources/css/app.css

@@ -45,7 +45,7 @@ @layer base {
     }
 }
 
-@keyframes back-to-top-spin {
+@keyframes spin {
     from {
         transform: rotate(0deg);
     }
@@ -115,9 +115,9 @@ @layer components {
     }
 
     /* ── Hero star — same burst shape/spin as back-to-top, always on ─ */
-    .hero-star {
+    .rotating-star {
         transform-origin: center;
-        animation: back-to-top-spin 7s infinite linear;
+        animation: spin 7s infinite linear;
     }
 
     /* ── Back to top ──────────────────────────────────────────────── */
@@ -138,7 +138,7 @@ @layer components {
     .back-to-top-shape path {
         fill: theme(colors.brand-light);
         transform-origin: center;
-        animation: back-to-top-spin 7s infinite linear;
+        animation: spin 7s infinite linear;
         animation-play-state: paused;
     }
 
@@ -300,27 +300,12 @@ @layer components {
         transform: translate(0, 0);
     }
 
-    /* ── Text dance — the word itself toggles font-weight/font-style
-       (normal → bold+italic) three times, then stays bold+italic, once
-       its .is-visible ancestor appears (pair with the `appear` Stimulus
-       controller — data-controller="appear" data-appear-visible-class
-       ="is-visible"); add data-text="<same word>" ── */
     .text-dance {
         display: inline-block;
         font-weight: inherit;
         font-style: normal;
     }
 
-    /* Layout-shift guard: reserve the wider bold+italic width up front.
-       A zero-height, invisible line contributes its (wider)
-       shrink-to-fit width to the inline-block box, so the box never
-       has to grow once the animation starts — nothing around the word
-       moves. Trade-off: since the real word starts out narrower and
-       left-aligned, this leaves a small trailing gap after it until
-       the first bold+italic pulse fills the box. (A variable-font
-       weight axis would be a second way to smooth this out, but
-       Manrope ships here as separate static weight files, not a
-       variable font, so there's no axis to animate.) */
     .text-dance::before {
         content: attr(data-text);
         display: block;
@@ -335,12 +320,57 @@ @layer components {
         animation: text-dance 0.8s ease 3 forwards;
         animation-delay: var(--dance-delay, 0s);
     }
+
+    /* Typography for markdown rendered from Stoic legal-page bodies (h1.h6, p, lists,
+       links, tables) — a plain set of descendant selectors, not expressible as
+       utilities on the wrapper alone since the markup itself is generated by Str::markdown(). */
+    .legal-content {
+        @apply text-neutral-700;
+    }
+
+    .legal-content > * + * {
+        @apply mt-6;
+    }
+
+    .legal-content h2 {
+        @apply font-display text-2xl font-bold text-black;
+    }
+
+    .legal-content h3 {
+        @apply font-display text-xl font-bold text-black;
+    }
+
+    .legal-content ul,
+    .legal-content ol {
+        @apply ml-6 space-y-2;
+    }
+
+    .legal-content ul {
+        @apply list-disc;
+    }
+
+    .legal-content ol {
+        @apply list-decimal;
+    }
+
+    .legal-content a {
+        @apply underline hover:text-black;
+    }
+
+    .legal-content strong {
+        @apply font-bold text-black;
+    }
+
+    .legal-content table {
+        @apply w-full border-collapse text-left text-sm;
+    }
+
+    .legal-content th,
+    .legal-content td {
+        @apply border border-neutral-300 px-3 py-2;
+    }
 }
 
-/* Replayed 3 times via animation-iteration-count on .is-visible
-   .text-dance above — each iteration starts back at 0% (normal) and
-   snaps to 100% (bold+italic); forwards fill holds the final
-   iteration's 100% state after it ends, so the word settles there. */
 @keyframes text-dance {
     0%, 60% { font-weight: inherit; font-style: normal; }
     70%, 100% { font-weight: 800; font-style: italic; }