/* ============================================================================ ICTA Design System — Motion & Microinteractions ---------------------------------------------------------------------------- Motion is a SIGNAL of state/orientation, never decoration. We animate only opacity / transform / clip (cheap, composited). Easing is the brand curve cubic-bezier(.2,.8,.2,1). Everything degrades to an instant, fully-visible resting state under prefers-reduced-motion. This layer (a) upgrades the EXISTING legacy classes (.btn-p, .card, .ni, .tb-btn, .tag, .toggle, .modal-*) and (b) adds optional ICTA components (.icta-skeleton, .icta-chip, .icta-status, .icta-empty, .icta-error, .icta-spinner) the templates can adopt incrementally. ============================================================================ */ /* ── Keyframes ───────────────────────────────────────────────────────────── Resting state is the LAST frame, so content is correct even if the animation never runs (hidden tab, headless render, reduced-motion). */ @keyframes icta-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes icta-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes icta-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } @keyframes icta-slide-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } @keyframes icta-shimmer { from { background-position: -160% 0; } to { background-position: 260% 0; } } @keyframes icta-spin { to { transform: rotate(360deg); } } @keyframes icta-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes icta-pulse-ring{ 0% { box-shadow: 0 0 0 0 rgba(0,219,145,0.45); } 70%,100% { box-shadow: 0 0 0 7px rgba(0,219,145,0); } } @keyframes icta-typing { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } } /* ── Theme cross-fade enablement ─────────────────────────────────────────── theme-switcher.js adds .icta-theming to only after first paint so the initial render never animates. (Class + transition rule live in tokens.css.) */ /* ============================================================================ ENHANCE EXISTING LEGACY CLASSES ============================================================================ */ /* Buttons — lift on hover, settle on press, visible focus ring. */ .btn, .btn-p, .btn-g, .tb-btn { transition: background-color var(--icta-motion-fast) var(--icta-motion-ease), border-color var(--icta-motion-fast) var(--icta-motion-ease), color var(--icta-motion-fast) var(--icta-motion-ease), transform var(--icta-motion-fast) var(--icta-motion-ease), box-shadow var(--icta-motion-fast) var(--icta-motion-ease); } .btn:hover, .btn-p:hover, .tb-btn:hover { transform: translateY(-1px); } .btn:active, .btn-p:active, .tb-btn:active { transform: translateY(0); } .btn-p:hover { box-shadow: var(--icta-shadow-md); } .btn[disabled], .btn-p[disabled] { opacity: 0.45; transform: none; box-shadow: none; cursor: not-allowed; } /* Unified visible focus ring across interactive elements. */ .btn:focus-visible, .btn-p:focus-visible, .btn-g:focus-visible, .tb-btn:focus-visible, .ni:focus-visible, .si:focus-visible, .toggle:focus-visible, .chip:focus-visible, .icta-chip:focus-visible { outline: none; box-shadow: var(--icta-focus-ring); } /* Cards — subtle lift + a brand top-accent bar that wipes in on hover. Only applies where the template opts in via .hoverable (no surprise motion on static cards). */ .card.hoverable { position: relative; transition: transform var(--icta-motion-base) var(--icta-motion-ease), border-color var(--icta-motion-base) var(--icta-motion-ease), box-shadow var(--icta-motion-base) var(--icta-motion-ease); } .card.hoverable::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--icta-blue), var(--icta-cyan), var(--icta-mint)); transform: scaleX(0); transform-origin: left; transition: transform var(--icta-motion-base) var(--icta-motion-ease); border-radius: var(--icta-radius-sm) var(--icta-radius-sm) 0 0; } .card.hoverable:hover { transform: translateY(-3px); border-color: var(--icta-line-strong); box-shadow: var(--icta-shadow-md); } .card.hoverable:hover::before { transform: scaleX(1); } /* Sidebar nav — smooth color + a left indicator that grows from center. */ .ni { transition: color var(--icta-motion-fast) var(--icta-motion-ease), background-color var(--icta-motion-fast) var(--icta-motion-ease), border-color var(--icta-motion-fast) var(--icta-motion-ease); } /* Status tags — gentle fade-in when injected into the DOM. */ .tag { animation: icta-fade-in var(--icta-motion-base) var(--icta-motion-ease) both; } /* Toggle knob already transitions in legacy CSS; add focus affordance only. */ .toggle { transition: background-color var(--icta-motion-base) var(--icta-motion-ease); } /* Modal entrance (legacy .modal-overlay keyframe kept; refine the box). */ .modal-box { animation: icta-scale-in var(--icta-motion-base) var(--icta-motion-ease) both; } /* ============================================================================ OPTIONAL ICTA COMPONENTS (adopt in templates as needed) ============================================================================ */ /* Status chip — pill with text + optional live dot. Never color-only: pair with text/icon for accessibility. */ .icta-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--icta-radius-pill); font-size: var(--icta-text-caption); font-weight: var(--icta-weight-semibold); line-height: 1; border: 1px solid transparent; white-space: nowrap; } .icta-chip--neutral { background: var(--icta-surface-soft); color: var(--icta-text-secondary); border-color: var(--icta-border); } .icta-chip--brand { background: var(--icta-surface-hover); color: var(--icta-action); border-color: var(--icta-line-strong); } .icta-chip--success { background: var(--icta-success-soft); color: var(--icta-success); border-color: var(--icta-success-soft); } .icta-chip--warning { background: var(--icta-warning-soft); color: var(--icta-warning); border-color: var(--icta-warning-soft); } .icta-chip--danger { background: var(--icta-danger-soft); color: var(--icta-danger); border-color: var(--icta-danger-soft); } .icta-chip--info { background: var(--icta-info-soft); color: var(--icta-info); border-color: var(--icta-info-soft); } /* Live status dot (e.g. "online"). */ .icta-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--icta-text-caption); color: var(--icta-text-secondary); } .icta-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--icta-mist); flex-shrink: 0; } .icta-status--online .icta-status__dot { background: var(--icta-mint); } .icta-status--busy .icta-status__dot { background: var(--icta-warning); } .icta-status--review .icta-status__dot { background: var(--icta-cyan); } .icta-status--offline .icta-status__dot { background: var(--icta-text-tertiary); } /* Loading shimmer skeleton — use instead of a spinner inside content blocks. */ .icta-skeleton { position: relative; overflow: hidden; border-radius: var(--icta-radius-sm); background: var(--icta-surface-soft); } .icta-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, var(--icta-surface-hover) 50%, transparent 100% ); background-size: 200% 100%; animation: icta-shimmer 1.4s linear infinite; } .icta-skeleton--text { height: 0.85em; margin: 0.35em 0; } .icta-skeleton--line { height: 12px; } .icta-skeleton--block { height: 72px; } /* Inline spinner — for buttons / small affordances only. */ .icta-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--icta-border); border-top-color: var(--icta-action); border-radius: 50%; animation: icta-spin 0.8s linear infinite; vertical-align: -2px; } /* Typing indicator (3 dots) — for the agent/chat "thinking" state. */ .icta-typing { display: inline-flex; gap: 4px; align-items: center; } .icta-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--icta-action); } /* Empty state — teaches the interface, not just "nothing here". */ .icta-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--icta-space-sm); padding: var(--icta-space-xl) var(--icta-space-md); color: var(--icta-text-secondary); animation: icta-fade-up var(--icta-motion-slow) var(--icta-motion-ease) both; } .icta-empty__mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--icta-radius-md); background: var(--icta-surface-hover); margin-bottom: var(--icta-space-xs); } .icta-empty__title { font-size: var(--icta-text-sm); font-weight: var(--icta-weight-semibold); color: var(--icta-text-primary); } .icta-empty__hint { font-size: var(--icta-text-caption); max-width: 42ch; line-height: var(--icta-leading-normal); } /* Error state — distinct from empty; offers a next action. */ .icta-error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--icta-space-sm); padding: var(--icta-space-xl) var(--icta-space-md); border: 1px solid var(--icta-danger-soft); background: var(--icta-danger-soft); border-radius: var(--icta-radius-md); color: var(--icta-danger); animation: icta-fade-in var(--icta-motion-base) var(--icta-motion-ease) both; } .icta-error__title { font-weight: var(--icta-weight-semibold); } /* Entrance utilities for content blocks (opt-in via class). */ .icta-reveal { animation: icta-fade-up var(--icta-motion-slow) var(--icta-motion-ease) both; } .icta-reveal--in { animation: icta-fade-in var(--icta-motion-slow) var(--icta-motion-ease) both; } /* ============================================================================ CONTINUOUS MICROINTERACTIONS — gated behind no-preference ============================================================================ */ @media (prefers-reduced-motion: no-preference) { .icta-status--online .icta-status__dot { animation: icta-pulse-ring 2.4s var(--icta-motion-ease) infinite; } .icta-live-dot { animation: icta-blink 1.6s steps(2, jump-none) infinite; } .icta-typing span { animation: icta-typing 1.4s var(--icta-motion-ease) infinite; } .icta-typing span:nth-child(2) { animation-delay: 0.16s; } .icta-typing span:nth-child(3) { animation-delay: 0.32s; } } /* ============================================================================ REDUCED MOTION — instant, fully-visible resting states ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .card.hoverable:hover { transform: none; } .card.hoverable::before { transform: scaleX(1); } /* show accent, no wipe */ .btn:hover, .btn-p:hover, .tb-btn:hover { transform: none; } .icta-skeleton::after { animation: none; opacity: 0.5; } .icta-spinner { animation: none; border-top-color: var(--icta-action); } }