/** * FINO motion — system-wide, CSS-first. * Gated by html.fino-motion-on (set in unless prefers-reduced-motion). */ html.fino-motion-on { --fino-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --fino-ease: cubic-bezier(0.4, 0, 0.2, 1); --fino-dur-fast: 150ms; --fino-dur: 260ms; --fino-dur-enter: 560ms; --fino-rise: 18px; } @keyframes fino-rise { from { opacity: 0; transform: translateY(var(--fino-rise)); } to { opacity: 1; transform: none; } } @keyframes fino-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes fino-slide-start { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } } @keyframes fino-slide-end { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes fino-dropdown-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes fino-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes fino-scale-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } html[dir="rtl"].fino-motion-on { --fino-flip: -1; } html.fino-motion-on:not([dir="rtl"]) { --fino-flip: 1; } /* ── Page enter ─────────────────────────────────────────────── */ html.fino-motion-on .dash-content > .page-header { animation: fino-rise var(--fino-dur-enter) var(--fino-ease-out) both; } html.fino-motion-on .dash-content > .page-header .action-btn-col { animation: fino-slide-end 0.5s 0.08s var(--fino-ease-out) both; } html[dir="rtl"].fino-motion-on .dash-content > .page-header .action-btn-col { animation-name: fino-slide-start; } html.fino-motion-on .dash-content > .card, html.fino-motion-on .dash-content > .row > [class*="col-"] > .card, html.fino-motion-on .dash-content .fino-stat-card, html.fino-motion-on .dash-content .fino-alert-card, html.fino-motion-on .dash-content .fino-kpi-card, html.fino-motion-on .dash-content .dashboard-kpi-card { animation: fino-rise var(--fino-dur-enter) var(--fino-ease-out) both; } html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(1) > .card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(1) > .fino-stat-card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(1) > .dashboard-kpi-card { animation-delay: 50ms; } html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(2) > .card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(2) > .fino-stat-card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(2) > .dashboard-kpi-card { animation-delay: 110ms; } html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(3) > .card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(3) > .fino-stat-card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(3) > .dashboard-kpi-card { animation-delay: 170ms; } html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(4) > .card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(4) > .fino-stat-card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(4) > .dashboard-kpi-card { animation-delay: 230ms; } html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(n+5) > .card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(n+5) > .fino-stat-card, html.fino-motion-on .dash-content > .row > [class*="col-"]:nth-child(n+5) > .dashboard-kpi-card { animation-delay: 280ms; } html.fino-motion-on .dash-content > .row:nth-of-type(n+4) > [class*="col-"] > .card:not(.fino-reveal), html.fino-motion-on .dash-content > .row:nth-of-type(n+4) > [class*="col-"] > .fino-stat-card:not(.fino-reveal), html.fino-motion-on .dash-content > .row:nth-of-type(n+4) > [class*="col-"] > .dashboard-kpi-card:not(.fino-reveal) { animation: none; } .fino-reveal { animation: fino-rise var(--fino-dur-enter) var(--fino-ease-out) both !important; animation-delay: var(--fino-reveal-delay, 0ms) !important; } /* ── Hover lift ─────────────────────────────────────────────── */ html.fino-motion-on .dashboard-kpi-card, html.fino-motion-on .fino-stat-card, html.fino-motion-on .fino-kpi-card, html.fino-motion-on .user-card, html.fino-motion-on .client-card, html.fino-motion-on .card.c-card, html.fino-motion-on .card[data-hover], html.fino-motion-on .fino-plan-card, html.fino-motion-on .kanban-wrapper .card { transition: transform var(--fino-dur) var(--fino-ease-out), box-shadow var(--fino-dur) var(--fino-ease), border-color var(--fino-dur) var(--fino-ease); } html.fino-motion-on .dashboard-kpi-card:hover, html.fino-motion-on .fino-stat-card:hover, html.fino-motion-on .fino-kpi-card:hover, html.fino-motion-on .user-card:hover, html.fino-motion-on .client-card:hover, html.fino-motion-on .card.c-card:hover, html.fino-motion-on .card[data-hover]:hover, html.fino-motion-on .fino-plan-card:hover, html.fino-motion-on .kanban-wrapper .card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(16, 24, 40, 0.12), 0 4px 10px rgba(16, 24, 40, 0.05); } /* ── Buttons ────────────────────────────────────────────────── */ html.fino-motion-on .btn, html.fino-motion-on .action-btn, html.fino-motion-on .fino-back-btn, html.fino-motion-on .fino-btn { transition: transform var(--fino-dur-fast) var(--fino-ease-out), box-shadow var(--fino-dur) var(--fino-ease), background-color var(--fino-dur) var(--fino-ease), border-color var(--fino-dur) var(--fino-ease), color var(--fino-dur) var(--fino-ease), opacity var(--fino-dur-fast) var(--fino-ease); } html.fino-motion-on .btn:hover:not(:disabled):not(.disabled), html.fino-motion-on .action-btn:hover, html.fino-motion-on .fino-btn:hover { transform: translateY(-2px); } html.fino-motion-on .btn:active:not(:disabled):not(.disabled), html.fino-motion-on .action-btn:active, html.fino-motion-on .dash-head-link:active, html.fino-motion-on .fino-btn:active { transform: scale(0.96); transition-duration: 90ms; } /* ── Forms ──────────────────────────────────────────────────── */ html.fino-motion-on .form-control, html.fino-motion-on .form-select, html.fino-motion-on .dataTable-input, html.fino-motion-on .dataTable-selector { transition: border-color var(--fino-dur) var(--fino-ease), box-shadow var(--fino-dur) var(--fino-ease), background-color var(--fino-dur) var(--fino-ease), transform var(--fino-dur-fast) var(--fino-ease); } html.fino-motion-on .form-control:focus, html.fino-motion-on .form-select:focus { transform: translateY(-1px); } html.fino-motion-on .form-check-input { transition: background-color var(--fino-dur) var(--fino-ease), border-color var(--fino-dur) var(--fino-ease), box-shadow var(--fino-dur) var(--fino-ease), transform var(--fino-dur-fast) var(--fino-ease); } html.fino-motion-on .form-check-input:active { transform: scale(0.9); } /* ── Tabs / lists / empty ───────────────────────────────────── */ html.fino-motion-on .nav-tabs .nav-link, html.fino-motion-on .nav-pills .nav-link, html.fino-motion-on .list-group-item, html.fino-motion-on .fino-setup-sidebar .list-group-item { transition: background-color var(--fino-dur) var(--fino-ease), color var(--fino-dur) var(--fino-ease), border-color var(--fino-dur) var(--fino-ease), transform var(--fino-dur) var(--fino-ease), box-shadow var(--fino-dur) var(--fino-ease); } html.fino-motion-on .list-group-item-action:hover, html.fino-motion-on .fino-setup-sidebar .list-group-item:hover { transform: translateX(calc(var(--fino-flip, 1) * 4px)); } html.fino-motion-on .empty-state, html.fino-motion-on .sa2-empty-state, html.fino-motion-on .no-data-state { animation: fino-scale-in 0.5s var(--fino-ease-out) both; } html.fino-motion-on .badge, html.fino-motion-on .status-badge { transition: transform var(--fino-dur-fast) var(--fino-ease), filter var(--fino-dur) var(--fino-ease); } /* ── Tables ─────────────────────────────────────────────────── */ html.fino-motion-on .table > tbody > tr > td, html.fino-motion-on .dataTable-table > tbody > tr > td { transition: background-color var(--fino-dur) var(--fino-ease), transform var(--fino-dur-fast) var(--fino-ease); } /* ── Charts ─────────────────────────────────────────────────── */ html.fino-motion-on .apexcharts-canvas, html.fino-motion-on .dash-content .card:has(.apexcharts-canvas) { animation: fino-fade 0.7s 0.15s var(--fino-ease-out) both; } /* ── Modals ─────────────────────────────────────────────────── */ html.fino-motion-on .modal.fade .modal-dialog { transform: translateY(20px) scale(0.96); transition: transform 0.36s var(--fino-ease-out); } html.fino-motion-on .modal.show .modal-dialog { transform: none; } html.fino-motion-on .modal-content { animation: fino-pop 0.36s var(--fino-ease-out) both; } html.fino-motion-on .modal.fade:not(.show) .modal-content { animation: none; } html.fino-motion-on .swal2-popup { animation: fino-pop 0.32s var(--fino-ease-out) both !important; } /* ── Dropdowns ──────────────────────────────────────────────── */ html.fino-motion-on .dropdown-menu.show, html.fino-motion-on .dropdown-menu[data-bs-popper] { animation: fino-dropdown-in 0.22s var(--fino-ease-out) both; transform-origin: top center; } /* ── Offcanvas ──────────────────────────────────────────────── */ html.fino-motion-on .fino-offcanvas.offcanvas-end { transition: transform 0.36s var(--fino-ease-out); } html.fino-motion-on .offcanvas.show .fino-offcanvas-body > * { animation: fino-rise 0.42s var(--fino-ease-out) both; } /* ── Alerts / toasts ────────────────────────────────────────── */ html.fino-motion-on .alert, html.fino-motion-on .fino-alert-card { animation: fino-rise 0.45s var(--fino-ease-out) both; } html.fino-motion-on .app-toast.show { animation: fino-slide-end 0.36s var(--fino-ease-out) both; } html[dir="rtl"].fino-motion-on .app-toast.show { animation-name: fino-slide-start; } /* ── Sidebar / header ───────────────────────────────────────── */ html.fino-motion-on .dash-sidebar { animation: fino-slide-start 0.5s var(--fino-ease-out) both; } html[dir="rtl"].fino-motion-on .dash-sidebar { animation-name: fino-slide-end; } html.fino-motion-on .dash-header { animation: fino-fade 0.45s 0.05s var(--fino-ease-out) both; } html.fino-motion-on .dash-sidebar .dash-link, html.fino-motion-on .dash-header .dash-head-link { transition: background-color var(--fino-dur) var(--fino-ease), color var(--fino-dur) var(--fino-ease), transform var(--fino-dur) var(--fino-ease-out), box-shadow var(--fino-dur) var(--fino-ease), border-color var(--fino-dur) var(--fino-ease); } html.fino-motion-on:not([dir="rtl"]) body:not(.minimenu) .dash-sidebar .dash-navbar > .dash-item:not(.active) > .dash-link:hover { transform: translateX(4px); } html[dir="rtl"].fino-motion-on body:not(.minimenu) .dash-sidebar .dash-navbar > .dash-item:not(.active) > .dash-link:hover { transform: translateX(-4px); } html.fino-motion-on .dash-sidebar .dash-inner { transition: width 0.3s var(--fino-ease-out); } /* ── Loader ─────────────────────────────────────────────────── */ html.fino-motion-on .loader-bg { transition: opacity 0.4s var(--fino-ease); } /* ── Auth ───────────────────────────────────────────────────── */ html.fino-motion-on .fino-auth-brand { animation: fino-slide-start 0.7s var(--fino-ease-out) both; } html[dir="rtl"].fino-motion-on .fino-auth-brand { animation-name: fino-slide-end; } html.fino-motion-on .fino-auth-form-side { animation: fino-fade 0.55s 0.08s var(--fino-ease-out) both; } html.fino-motion-on .fino-auth-form-wrap { animation: fino-rise 0.6s 0.14s var(--fino-ease-out) both; } html.fino-motion-on .fino-brand-glass { animation: fino-pop 0.8s 0.3s var(--fino-ease-out) both; } html.fino-motion-on .fino-brand-pill { animation: fino-rise 0.5s var(--fino-ease-out) both; } html.fino-motion-on .fino-brand-pill:nth-child(1) { animation-delay: 0.28s; } html.fino-motion-on .fino-brand-pill:nth-child(2) { animation-delay: 0.38s; } html.fino-motion-on .fino-brand-pill:nth-child(3) { animation-delay: 0.48s; } /* ── Website ────────────────────────────────────────────────── */ html.fino-motion-on .fino-site main { animation: fino-fade 0.4s var(--fino-ease-out) both; } html.fino-motion-on .fino-site .fino-site-footer { animation: fino-rise 0.55s 0.1s var(--fino-ease-out) both; } html.fino-motion-on .fino-site .fino-btn, html.fino-motion-on .fino-site .fino-store-badge, html.fino-motion-on .fino-site .fino-social-btn { transition: transform 0.24s var(--fino-ease-out), box-shadow 0.24s var(--fino-ease), background 0.2s ease; } html.fino-motion-on .fino-site .fino-btn:hover, html.fino-motion-on .fino-site .fino-store-badge:hover, html.fino-motion-on .fino-site .fino-social-btn:hover { transform: translateY(-3px); } html.fino-motion-on .fino-site .fino-btn:active, html.fino-motion-on .fino-site .fino-social-btn:active { transform: scale(0.97); } /* ── POS ────────────────────────────────────────────────────── */ html.fino-motion-on body.pos-page .pos-shell { animation: fino-fade 0.32s var(--fino-ease) both; } html.fino-motion-on body.pos-page .pos-rail { animation: fino-slide-start 0.45s var(--fino-ease-out) both; } html[dir="rtl"].fino-motion-on body.pos-page .pos-rail { animation-name: fino-slide-end; } html.fino-motion-on body.pos-page .pos-product-card { animation: fino-rise 0.38s var(--fino-ease-out) both; transition: transform 0.18s var(--fino-ease-out), box-shadow 0.18s var(--fino-ease), border-color 0.18s var(--fino-ease); } html.fino-motion-on body.pos-page .pos-product-grid-area [class*="col-"]:nth-child(1) .pos-product-card { animation-delay: 20ms; } html.fino-motion-on body.pos-page .pos-product-grid-area [class*="col-"]:nth-child(2) .pos-product-card { animation-delay: 45ms; } html.fino-motion-on body.pos-page .pos-product-grid-area [class*="col-"]:nth-child(3) .pos-product-card { animation-delay: 70ms; } html.fino-motion-on body.pos-page .pos-product-grid-area [class*="col-"]:nth-child(4) .pos-product-card { animation-delay: 95ms; } html.fino-motion-on body.pos-page .pos-product-grid-area [class*="col-"]:nth-child(5) .pos-product-card { animation-delay: 120ms; } html.fino-motion-on body.pos-page .pos-product-grid-area [class*="col-"]:nth-child(6) .pos-product-card { animation-delay: 145ms; } html.fino-motion-on body.pos-page .pos-product-grid-area [class*="col-"]:nth-child(7) .pos-product-card { animation-delay: 170ms; } html.fino-motion-on body.pos-page .pos-product-grid-area [class*="col-"]:nth-child(8) .pos-product-card { animation-delay: 195ms; } html.fino-motion-on body.pos-page .pos-product-grid-area [class*="col-"]:nth-child(n+9) .pos-product-card { animation-delay: 210ms; } html.fino-motion-on body.pos-page .pos-product-card:hover { transform: translateY(-4px); } html.fino-motion-on body.pos-page .pos-product-card:active { transform: scale(0.98); } html.fino-motion-on body.pos-page .pos-pay-method, html.fino-motion-on body.pos-page .pos-keypad button, html.fino-motion-on body.pos-page .pos-nav-group a, html.fino-motion-on body.pos-page .pos-nav-group button, html.fino-motion-on body.pos-page .pos-header-icon-btn { transition: transform 0.14s var(--fino-ease-out), background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; } html.fino-motion-on body.pos-page .pos-pay-method:hover, html.fino-motion-on body.pos-page .pos-header-icon-btn:hover { transform: translateY(-2px); } html.fino-motion-on body.pos-page .pos-pay-method:active, html.fino-motion-on body.pos-page .pos-keypad button:active, html.fino-motion-on body.pos-page .pos-nav-group a:active, html.fino-motion-on body.pos-page .pos-nav-group button:active { transform: scale(0.96); } /* ── Customer display ───────────────────────────────────────── */ html.fino-motion-on .pos-cfd-top { animation: fino-slide-start 0.45s var(--fino-ease-out) both; } html.fino-motion-on .pos-cfd-empty, html.fino-motion-on .pos-cfd-order { animation: fino-rise 0.45s var(--fino-ease-out) both; } html.fino-motion-on .pos-cfd-lines li { animation: fino-rise 0.32s var(--fino-ease-out) both; } html.fino-motion-on .pos-cfd-lines li:nth-child(1) { animation-delay: 40ms; } html.fino-motion-on .pos-cfd-lines li:nth-child(2) { animation-delay: 80ms; } html.fino-motion-on .pos-cfd-lines li:nth-child(3) { animation-delay: 120ms; } html.fino-motion-on .pos-cfd-lines li:nth-child(4) { animation-delay: 160ms; } html.fino-motion-on .pos-cfd-lines li:nth-child(n+5) { animation-delay: 190ms; } html.fino-motion-on .pos-cfd-total { animation: fino-pop 0.4s 0.12s var(--fino-ease-out) both; } /* ── Public customer / career pages ─────────────────────────── */ html.fino-motion-on .job-wrapper, html.fino-motion-on .invoice, html.fino-motion-on .invoice-box, html.fino-motion-on .container-application .page-content { animation: fino-rise 0.5s var(--fino-ease-out) both; } html.fino-motion-on .job-card-body { transition: transform 0.24s var(--fino-ease-out), box-shadow 0.24s var(--fino-ease); } html.fino-motion-on .job-card-body:hover { transform: translateY(-6px); } /* ── Landing (legacy) ───────────────────────────────────────── */ html.fino-motion-on body:not(.pos-page):not(.fino-site) .wow { will-change: transform, opacity; } /* ── Reduced motion / print ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.fino-motion-on *, html.fino-motion-on *::before, html.fino-motion-on *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media print { html.fino-motion-on *, html.fino-motion-on *::before, html.fino-motion-on *::after { animation: none !important; transition: none !important; } }