:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
color: #e2e8f0;
}
.glass-effect {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.glow-text {
text-shadow: 0 0 10px rgba(74, 144, 226, 0.6);
}
.input-field {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.input-field:focus {
background: rgba(30, 41, 59, 0.9);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
}
.result-circle {
transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.calculate-btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.calculate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.calculate-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.calculate-btn:active::after {
width: 300px;
height: 300px;
opacity: 0;
}
.category-indicator {
opacity: 0;
transform: translateY(10px);
transition: all 0.5s ease;
}
.category-indicator.show {
opacity: 1;
transform: translateY(0);
}
.info-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.info-panel.open {
max-height: 500px;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse {
animation: pulse 2s infinite;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}