Spaces:
Sleeping
Sleeping
File size: 1,467 Bytes
b6ba91b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <div class="rhotic-character-wrap">
<div class="rhotic-blob-row">
<img id="rhotic-blob"
class="rhotic-blob"
src="{{BLOB_URL}}"
data-rhotic-idle="{{BLOB_URL}}"
data-rhotic-thinking="{{BLOB_THINKING_URL}}"
alt="Rho, the Rhotic coach character">
<div id="rhotic-bubble" class="rhotic-bubble hidden" aria-live="polite"></div>
</div>
<div id="rhotic-ready-badge" class="rhotic-ready-badge hidden" aria-live="polite">
Nice — ready for the next one? Tap <strong>Next →</strong>
</div>
</div>
<style>
.rhotic-character-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 0 1.5rem 0;
position: relative;
gap: 0.75rem;
}
.rhotic-blob-row {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
width: 100%;
}
.rhotic-blob {
width: 160px;
height: 160px;
object-fit: contain;
display: block;
transition: transform 0.25s ease;
flex: 0 0 auto;
}
.rhotic-blob.celebrating { animation: rhotic-blob-bounce 0.7s ease-in-out; }
@keyframes rhotic-blob-bounce {
0%, 100% { transform: translateY(0) scale(1); }
30% { transform: translateY(-18px) scale(1.05); }
60% { transform: translateY(0) scale(0.98); }
}
@media (max-width: 540px) {
.rhotic-blob { width: 130px; height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
.rhotic-blob.celebrating { animation: none !important; }
}
</style>
|