From bf5ea1639469950442a99bea3bf747715168826d Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 10 Jun 2026 14:58:50 +0100
Subject: [PATCH] fix(dino): add mobile readability scrim over hero background

On narrow screens the cover-cropped hero photo lands under the
heading text, making it unreadable. Add a light gradient overlay
behind the text at <=640px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/sections/DinoPageContent.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/sections/DinoPageContent.tsx b/src/components/sections/DinoPageContent.tsx
index 87fe7f6..607dcac 100644
--- a/src/components/sections/DinoPageContent.tsx
+++ b/src/components/sections/DinoPageContent.tsx
@@ -71,13 +71,13 @@ const FB_DINOS: DinoSpec[] = [
     ver: '(Гігантська Версія)',
     length: '20 м.',
     height: '7 м.',
-    imageUrl: '/images/figma/dyno-wheel/trex.png',
+    imageUrl: '/images/figma/dyno-wheel/trex.webp',
   },
   {
     name: 'Спінозавр',
     length: '15 м.',
     height: '6 м.',
-    imageUrl: '/images/figma/dyno-wheel/spinosaurus.png',
+    imageUrl: '/images/figma/dyno-wheel/spinosaurus.webp',
   },
   {
     name: 'Брахіозавр',
@@ -101,19 +101,19 @@ const FB_DINOS: DinoSpec[] = [
     name: 'Трицератопс',
     length: '9 м.',
     height: '3 м.',
-    imageUrl: '/images/figma/dyno-wheel/triceratops.png',
+    imageUrl: '/images/figma/dyno-wheel/triceratops.webp',
   },
   {
     name: 'Анкілозавр',
     length: '8 м.',
     height: '1,7 м.',
-    imageUrl: '/images/figma/dyno-wheel/ankylosaurus.png',
+    imageUrl: '/images/figma/dyno-wheel/ankylosaurus.webp',
   },
   {
     name: 'Паразауролоф',
     length: '10 м.',
     height: '5 м.',
-    imageUrl: '/images/figma/dyno-wheel/parasaurolophus.png',
+    imageUrl: '/images/figma/dyno-wheel/parasaurolophus.webp',
   },
   {
     name: 'Карнотавр',
@@ -125,7 +125,7 @@ const FB_DINOS: DinoSpec[] = [
     name: 'Баріонікс',
     length: '10 м.',
     height: '2,5 м.',
-    imageUrl: '/images/figma/dyno-wheel/baryonyx.png',
+    imageUrl: '/images/figma/dyno-wheel/baryonyx.webp',
   },
   {
     name: 'Космоцератопс',
@@ -602,6 +602,11 @@ const DYNO_CSS = `
 }
 .dino-page .dcs-dot.active{width:10px;height:10px;background:#fff;}
 @media(max-width:640px){
+  /* Readability scrim: cover-cropped hero-bg lands under the text on narrow screens */
+  .dino-page .hero::after{
+    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
+    background:linear-gradient(180deg,rgba(241,251,235,.9) 0%,rgba(241,251,235,.65) 100%);
+  }
   .dino-page .dino-wheel{display:none;}
   .dino-page .dino-card-slider{display:block;}
   /* Fix gallery overlapping card slider (negative margin designed for desktop wheel) */