first publish

src/components/ui/Numeral.tsx

@@ -0,0 +1,47 @@
+import { cn } from "@/lib/utils";
+
+export interface NumeralProps {
+  /** „01“ */
+  value: string;
+  /**
+   * Ground the numeral sits on. Omit to resolve it from the nearest
+   * `[data-theme]` ancestor (CSS only): `.gold-text` on dark, flat `--gold-700` on light.
+   */
+  theme?: "dark" | "light";
+  /** `position: sticky; top: calc(50vh − .45em)` (desktop). Default true. */
+  sticky?: boolean;
+  className?: string;
+}
+
+const GOLD_TEXT_DARK =
+  "[[data-theme=dark]_&]:bg-[image:var(--gold-gradient-text)] [[data-theme=dark]_&]:bg-clip-text [[data-theme=dark]_&]:text-gold [[data-theme=dark]_&]:[-webkit-text-fill-color:transparent]";
+
+/**
+ * Section numeral: Playfair 400, `clamp(4rem, 2rem + 8vw, 10rem)`,
+ * lining numerals. Decorative – the accessible section number lives in the
+ * Section's mono meta line, so this is `aria-hidden`.
+ */
+export function Numeral({ value, theme, sticky = true, className }: NumeralProps) {
+  const colour =
+    theme === "dark"
+      ? "gold-text"
+      : theme === "light"
+        ? "text-gold-700"
+        : cn("text-gold-700", GOLD_TEXT_DARK);
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "block select-none font-display text-[clamp(4rem,2rem+8vw,10rem)] font-normal leading-[0.9] tracking-[-0.01em] [font-variant-numeric:lining-nums]",
+        sticky && "lg:sticky lg:top-[calc(50vh_-_0.45em)]",
+        colour,
+        className,
+      )}
+    >
+      {value}
+    </span>
+  );
+}
+
+export default Numeral;