From f5423d202c76e00be3824928f4e2257bef8d0248 Mon Sep 17 00:00:00 2001 From: Vadym Samoilenko Date: Wed, 18 Mar 2026 21:51:57 +0000 Subject: [PATCH] Increase gap between rotating text ring and sphere in Banner2 Text was overlapping the globe. Scale the SVG text ring to 1.45x on desktop and 1.6x on mobile so the text orbit sits clearly outside the sphere boundary. Co-Authored-By: Claude Sonnet 4.6 --- src/components/Banner2.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/Banner2.css b/src/components/Banner2.css index d4711d0..818efc4 100644 --- a/src/components/Banner2.css +++ b/src/components/Banner2.css @@ -94,14 +94,14 @@ width: 100%; height: 100%; object-fit: contain; - animation: spin-right 20s linear infinite; + animation: spin-text 20s linear infinite; will-change: transform; position: relative; z-index: 2; } .is-hovered .banner2-rotating-text { - animation-duration: 5s; + animation: spin-text 5s linear infinite; filter: drop-shadow(0 0 8px rgba(255, 91, 4, 0.4)); } @@ -110,6 +110,18 @@ to { transform: rotate(360deg); } } +@keyframes spin-text { + from { transform: scale(1.45) rotate(0deg); } + to { transform: scale(1.45) rotate(360deg); } +} + +@media (max-width: 900px) { + @keyframes spin-text { + from { transform: scale(1.6) rotate(0deg); } + to { transform: scale(1.6) rotate(360deg); } + } +} + /* ── Center CTA hint ── */ .banner2-cta-hint { position: absolute;