58 lines
1.3 KiB
CSS
58 lines
1.3 KiB
CSS
/* Motion (opt-out via data-anim="off") */
|
|
html[data-anim="on"] .card,
|
|
html[data-anim="on"] .stat,
|
|
html[data-anim="on"] button,
|
|
html[data-anim="on"] .accordion,
|
|
html[data-anim="on"] .modal-card {
|
|
transition:
|
|
transform 0.18s ease,
|
|
box-shadow 0.18s ease,
|
|
border-color 0.18s ease,
|
|
background-color 0.18s ease;
|
|
}
|
|
|
|
html[data-anim="on"] .card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
html[data-anim="on"][data-theme="light"] .card:hover {
|
|
box-shadow: 0 14px 26px rgba(12, 18, 32, 0.12);
|
|
}
|
|
|
|
html[data-anim="on"] button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
html[data-anim="on"] button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
html[data-anim="off"] .card,
|
|
html[data-anim="off"] .stat,
|
|
html[data-anim="off"] button,
|
|
html[data-anim="off"] .accordion,
|
|
html[data-anim="off"] .modal-card {
|
|
transition: none;
|
|
}
|
|
|
|
/* Hard-stop any remaining motion (spinners, keyframes, incidental transitions) */
|
|
html[data-anim="off"] *,
|
|
html[data-anim="off"] *::before,
|
|
html[data-anim="off"] *::after {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Focus states */
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
.card:focus-visible,
|
|
.status-chip:focus-visible,
|
|
.accordion-toggle:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|