46 lines
895 B
CSS
46 lines
895 B
CSS
/* Simple Sticky Price Display */
|
|
#priceDisplay {
|
|
/* Positioned under calculator with 10px gap */
|
|
margin-top: 10px;
|
|
transition: all 0.3s ease;
|
|
|
|
/* Ensure proper display when visible */
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Hidden state */
|
|
#priceDisplay.hidden {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Smooth show animation */
|
|
#priceDisplay.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Price update animation */
|
|
#currentPrice {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.price-update {
|
|
animation: priceUpdate 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes priceUpdate {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); color: #3b82f6; }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
/* Mobile responsiveness */
|
|
@media (max-width: 768px) {
|
|
#priceDisplay {
|
|
margin-top: 8px;
|
|
padding: 12px 16px;
|
|
}
|
|
} |