Aimpress/Aimpress_site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Increase gap between rotating text ring and sphere in Banner2

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-03-18 21:51:57 +00:00
parent bffaa1663d
commit f5423d202c
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/Banner2.css
View file

@ -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;