:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.animate-shimmer {
animation: shimmer 2s infinite;
}
.scroll-smooth {
scroll-behavior: smooth;
}
.custom-checkbox:checked + label:before {
background-color: #8cb900;
border-color: #8cb900;
transform: scale(1.05);
box-shadow: 0 0 10px rgba(140, 185, 0, 0.2);
}
.custom-checkbox + label:before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
margin-right: 8px;
vertical-align: middle;
transition: all 0.3s ease;
}
.custom-checkbox:checked + label:after {
content: '';
position: absolute;
left: 7px;
top: 3px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
animation: checkmark 0.2s ease-in-out forwards;
}
@keyframes checkmark {
0% {
opacity: 0;
transform: rotate(45deg) scale(0);
}
100% {
opacity: 1;
transform: rotate(45deg) scale(1);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.surface-input {
transition: all 0.3s ease;
}
.surface-input input:focus {
border-color: #8cb900;
box-shadow: 0 0 0 3px rgba(140, 185, 0, 0.1);
}
.surface-input {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}