fix: keep animated fact text readable

AtlasNexusTech · AtlasNexusTech · commit e40eb50e3f58 · 2026-07-30T13:09:13.000+02:00
diff --git a/demo-seydi-animee/motion.css b/demo-seydi-animee/motion.css
@@ -184,11 +184,17 @@
   transform: scale(1.1) translate3d(0, var(--parallax-y, 0px), 0);
 }
 .motion-page .facts strong {
-  background: linear-gradient(110deg, currentColor 25%, #bd9b5d 48%, currentColor 72%);
+  color: var(--navy);
+  background: linear-gradient(110deg, var(--navy) 25%, #8a6324 48%, var(--navy) 72%);
   background-size: 250% 100%;
-  color: transparent;
-  background-clip: text;
-  -webkit-background-clip: text;
+}
+@supports ((background-clip: text) or (-webkit-background-clip: text)) {
+  .motion-page .facts strong {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    -webkit-background-clip: text;
+  }
 }
 .motion-page .facts.is-visible strong { animation: number-shine 1.6s .2s ease forwards; }
 .motion-page .gallery .photo-button::after {
diff --git a/tests/test_demo_seydi_animated_contrast.py b/tests/test_demo_seydi_animated_contrast.py
@@ -0,0 +1,26 @@
+import re
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[1]
+MOTION_CSS = ROOT / "demo-seydi-animee" / "motion.css"
+
+
+def test_animated_fact_gradient_never_fades_to_transparent():
+    css = MOTION_CSS.read_text(encoding="utf-8")
+    match = re.search(
+        r"\.motion-page \.facts strong\s*\{(?P<body>.*?)\}",
+        css,
+        flags=re.DOTALL,
+    )
+    assert match, "Règle animée des chiffres introuvable"
+    rule = match.group("body")
+
+    # currentColor becomes transparent when the same rule sets color: transparent.
+    assert "currentColor" not in rule
+    assert "var(--navy)" in rule
+    assert "#8a6324" in rule.lower()
+
+    # Text must remain readable when background-clip:text is unsupported.
+    assert "@supports" in css
+    assert ".motion-page .facts strong {\n  color: var(--navy);" in css
+    assert "-webkit-text-fill-color: transparent" in css
