/* ========================================================================== BALOCH SM — REDUCED MOTION AND MOTION ACCESSIBILITY ========================================================================== FILE: /public_html/assets/css/motion/reduced-motion.css WEBSITE: https://investt.online PROJECT: Baloch SM Trading Intelligence Platform VERSION: 1.0.0 ========================================================================== PURPOSE Provide a consistent, accessible reduced-motion mode for: 01. Public landing pages 02. Authentication pages 03. Administrator MFA screens 04. Subscription dashboards 05. Forex market navigation 06. Live financial charts 07. Technical indicator panels 08. Market-level BUY/SELL clues 09. Notification bell and inbox 10. Confirmed signal popups 11. Thirty-second popup progress 12. Signal receipt dialogs 13. Economic calendars 14. CPI countdowns 15. Administrator navigation 16. Administrator tables and forms 17. Loading indicators 18. Skeleton placeholders 19. Decorative backgrounds 20. Tooltips and dropdowns 21. Mobile navigation 22. Accessible scrolling ========================================================================== SUPPORTED MOTION PREFERENCES AUTOMATIC: @media (prefers-reduced-motion: reduce) OPTIONAL WEBSITE OVERRIDE: The optional override is available for a future accessibility setting. Frontend code must apply it only when the user has actually chosen the corresponding preference. ========================================================================== CSS LOAD ORDER reset.css tokens.css themes/{approved-theme}.css themes/market-colors.css layout.css components.css page-specific stylesheets notifications.css signal-receipt.css responsive.css accessibility.css LAST: motion/reduced-motion.css ========================================================================== CRITICAL APPLICATION RULES REDUCED MOTION MUST NOT STOP: - Authenticated API requests - Server-Sent Events - Forex chart data updates - Candle rendering - Actual feed freshness detection - Verified signal publication - Selected-market notifications - Market-tab aggregate clues - Notification acknowledgements - Receipt authorization - Economic event calculations - CPI release countdowns - Payment processing/review - Administrator security workflows ========================================================================== 30-SECOND SIGNAL POPUP CONTRACT Actual popup lifetime: 30 seconds Source of timing: Frontend JavaScript using the application clock. NOT the CSS animation. Under reduced motion: - The popup remains readable. - Arrival movement is disabled. - Exit movement is disabled. - Animated progress is hidden. - Close and receipt controls remain usable. - JavaScript still dismisses at the appropriate time. - Manual dismissal remains available. - Acknowledgements still use authenticated APIs. Do not make JavaScript wait for animationend or transitionend before completing critical operations. ========================================================================== */ /* ========================================================================== 01. MOTION SYSTEM DEFAULTS ========================================================================== Base animations and transitions are defined by the existing Baloch SM design system. This file does not globally disable motion for users who have not requested reduced motion. No additional movement is introduced here. ========================================================================== */ /* ========================================================================== 02. OPERATING SYSTEM REDUCED-MOTION PREFERENCE ========================================================================== Supported by modern browsers on: - Windows - macOS - iOS - Android - Linux desktop environments where available The preference must be respected automatically. ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* ============================================================== 02.1. MOTION TOKEN OVERRIDES ============================================================== Any component that uses the shared motion tokens will become instantaneous. Fallback values are supplied where the token might not be present in earlier CSS. ============================================================== */ :root { --bsm-motion-instant: 0ms; --bsm-motion-fast: 0ms; --bsm-motion-normal: 0ms; --bsm-motion-medium: 0ms; --bsm-motion-slow: 0ms; --bsm-motion-slower: 0ms; --bsm-motion-enter: 0ms; --bsm-motion-exit: 0ms; --bsm-motion-hover: 0ms; --bsm-motion-panel: 0ms; --bsm-motion-page: 0ms; } /* ============================================================== 02.2. DISABLE DECORATIVE CSS ANIMATIONS ============================================================== This includes: - Keyframe-based movement - Animated glows - Shimmer effects - Spinning decorative loaders - Pulsing market dots - Sliding cards - Entrance/exit effects - Automatic CSS animations State changes remain functional. Native browser focus indicators are preserved. ============================================================== */ *, *::before, *::after { animation: none !important; transition: none !important; } /* ============================================================== 02.3. DISABLE CSS SMOOTH SCROLLING ============================================================== Instant scrolling reduces disorienting motion. The frontend must independently respect the same preference when invoking programmatic scrolling. ============================================================== */ html, body, * { scroll-behavior: auto !important; } /* ============================================================== 02.4. MARKET TAB SCROLLING ============================================================== Horizontal market navigation remains usable. Disable motion-oriented snapping while allowing manual keyboard and touchscreen scrolling. ============================================================== */ #market-tabs, .market-tabs, .timeframe-tabs, .timeframe-list, .admin-nav, .notification-filters { scroll-snap-type: none !important; scroll-behavior: auto !important; } /* ============================================================== 02.5. HOVER TRANSFORM EFFECTS ============================================================== Only decorative movement is neutralized. CSS transforms used for actual layout positioning, such as centered password buttons, are not changed. ============================================================== */ .card-interactive:hover, .dashboard-card.card-interactive:hover, .admin-card.card-interactive:hover, .plan-card:hover { transform: none !important; } /* ============================================================== 02.6. AUTHENTICATION APPEARANCE ============================================================== Login forms must remain immediately interactive. Password visibility and authentication remain controlled by actual frontend/backend logic. ============================================================== */ .auth-card, .auth-hero, .auth-form, .auth-note, .auth-feedback { animation: none !important; transition: none !important; } /* ============================================================== 02.7. ADMINISTRATOR AUTHENTICATION ============================================================== Reducing motion does not alter MFA validation, password security, session creation or sign-out. ============================================================== */ .admin-auth-page .auth-card, #admin-password-form, #admin-mfa-form, #admin-authenticator-code { animation: none !important; transition: none !important; } /* ============================================================== 02.8. DASHBOARD PANELS ============================================================== */ .dashboard-card, .dashboard-widget, .dashboard-header, .dashboard-section, .market-panel, .metric-card, .market-metric { animation: none !important; transition: none !important; } /* ============================================================== 02.9. MARKET TAB AND TIMEFRAME TRANSITIONS ============================================================== The active tab must still change appearance immediately after an authorized market selection. ============================================================== */ #market-tabs > button, #market-tabs [role="tab"], .market-tab, .timeframe-button, .timeframe-tab { animation: none !important; transition: none !important; } /* ============================================================== 02.10. MARKET CLUE ANIMATIONS ============================================================== Important: Other-market BUY/SELL clues remain visible. Only their pulsing or blinking is disabled. The frontend must continue to provide accessible counts and direction descriptions. ============================================================== */ #market-tabs .market-clue, #market-tabs .market-clue-dot, .market-tabs .market-clue, .market-clue-group, .market-clue-count { animation: none !important; transition: none !important; } /* ============================================================== 02.11. MARKET DATA CHARTS ============================================================== Live OHLCV values must continue to update. Only CSS animation effects are disabled. The chart renderer must also avoid optional animated transitions when the user requests reduced motion. ============================================================== */ #price-chart, #price-chart svg, #price-chart canvas, .chart-panel, .chart-card, .chart-region, .chart-price, .chart-last-price { animation: none !important; transition: none !important; } /* ============================================================== 02.12. CHART LEGENDS AND INDICATORS ============================================================== */ .indicator-panel, .technical-panel, .indicator-chip, .indicator-legend-item, .indicator-legend-dot, .indicator-line-swatch { animation: none !important; transition: none !important; } /* ============================================================== 02.13. VERIFIED FEED STATUS INDICATORS ============================================================== Remove flashing effects without changing statuses. Healthy / degraded / stale / disconnected / unverified must remain clearly distinguishable. ============================================================== */ .feed-status, .chart-feed-status, .market-feed-badge, .feed-status-badge, .market-feed-dot, .feed-health-dot, .notification-connection-status { animation: none !important; transition: none !important; } /* ============================================================== 02.14. NOTIFICATION BELL ============================================================== Unread counts continue updating. Disable any bell-shake or bounce animation. ============================================================== */ #bell-button, #bell-count, .notification-bell, .notice-bell, .notification-count { animation: none !important; transition: none !important; } /* ============================================================== 02.15. NOTIFICATION DRAWER ============================================================== The drawer should appear/disappear immediately. The frontend still manages: - aria-expanded - aria-hidden - Keyboard focus - Escape key - Closing - Focus restoration ============================================================== */ #notice-panel, #notice-backdrop, .notice-panel, .notification-panel, .notice-backdrop, .notification-backdrop { animation: none !important; transition: none !important; } /* ============================================================== 02.16. NOTIFICATION INBOX ITEMS ============================================================== */ .notification-item, .notice-item, .notification-history-item, .notification-filter, .notice-filter, .notification-unread-dot { animation: none !important; transition: none !important; } /* ============================================================== 02.17. CONFIRMED SIGNAL POPUPS ============================================================== Full BUY/SELL alerts remain available. The frontend is responsible for their lifecycle. Do not remove popup content or change signal eligibility when motion is reduced. ============================================================== */ #signal-popup-stack, .signal-popup, .trade-signal-popup, .signal-alert-popup { animation: none !important; transition: none !important; } /* ============================================================== 02.18. POPUP ARRIVAL / EXIT STATES ============================================================== Prevent sliding or scaling. The frontend must remove dismissed popups directly without depending on CSS animation events. ============================================================== */ .signal-popup.is-new, .signal-popup.is-visible, .signal-popup.is-exiting, .signal-alert-popup.is-new, .signal-alert-popup.is-exiting { animation: none !important; } /* ============================================================== 02.19. THIRTY-SECOND PROGRESS ANIMATION ============================================================== The normal progress indicator relies on an animation lasting 30 seconds. Without animation it would remain visually full and could misleadingly imply that no time had passed. Hide only the decorative time-progress indicator. The complete signal notification stays visible. Actual dismissal still happens after 30 seconds under frontend JavaScript control. Frontend text may state: "Automatically closes after 30 seconds." That text must come from application markup, not CSS-generated content. ============================================================== */ .signal-popup-progress, .popup-progress, .signal-alert-progress { display: none !important; } /* ============================================================== 02.20. SIGNAL RECEIPT MODALS ============================================================== No zoom/slide entrance. Receipt content and its close/copy controls must remain usable. ============================================================== */ #receipt-modal, #receipt-modal .receipt, #receipt-modal .receipt-card, #receipt-modal .receipt-content, #receipt-modal .signal-receipt, .receipt-modal, .signal-receipt-modal { animation: none !important; transition: none !important; } /* ============================================================== 02.21. RECEIPT ENTRANCE ============================================================== */ #receipt-modal.is-opening .receipt-card, #receipt-modal.is-opening .receipt-content, #receipt-modal.is-opening .signal-receipt { animation: none !important; } /* ============================================================== 02.22. RECEIPT CONFIDENCE BARS ============================================================== Bars may still display a real calibrated value. Their animated width transition is disabled. ============================================================== */ .receipt-confidence-fill, .receipt-score-fill { transition: none !important; } /* ============================================================== 02.23. ECONOMIC EVENT CARDS ============================================================== */ #economic-events, .economic-event, .economic-event-card, .news-event, .cpi-panel, .cpi-event, .high-impact-news { animation: none !important; transition: none !important; } /* ============================================================== 02.24. CPI COUNTDOWN ============================================================== DO NOT PAUSE COUNTDOWN CALCULATIONS. Suppress only decorative number transitions and visual pulsing. Real day/hour/minute/second values must still update according to synchronized application time. ============================================================== */ .cpi-countdown, .economic-countdown, .countdown-grid, .countdown-cell, .countdown-unit, .countdown-value { animation: none !important; transition: none !important; } /* ============================================================== 02.25. SUBSCRIPTION AND BILLING ============================================================== No payment or approval behavior changes. Visual plan selection remains immediately apparent. ============================================================== */ .plan-card, .subscription-status-card, .access-status-card, .payment-review-status, .payment-method-card { animation: none !important; transition: none !important; } /* ============================================================== 02.26. ADMINISTRATOR CONTROL CENTER ============================================================== */ .admin-shell, .admin-sidebar, .admin-nav, .admin-nav-link, .admin-main-wrap, .admin-topbar, .admin-card, .admin-stat, .admin-action-row, .admin-table { animation: none !important; transition: none !important; } /* ============================================================== 02.27. TOOLTIP PRESENTATION ============================================================== Tooltips remain keyboard accessible. Opening and closing is immediate. The existing accessibility.css visibility rules continue to determine when a tooltip is shown. ============================================================== */ .tooltip, .tooltip-content, .popover, .popover-content { animation: none !important; transition: none !important; } /* ============================================================== 02.28. DROPDOWNS AND MENUS ============================================================== Menu state remains controlled by actual markup and frontend interaction. ============================================================== */ .dropdown, .dropdown-menu, .menu-panel, .context-menu, .mobile-menu { animation: none !important; transition: none !important; } /* ============================================================== 02.29. TOAST / ALERT PRESENTATION ============================================================== Error and success messages remain readable. No sliding, shaking or flashing is needed. ============================================================== */ .toast, .toast-item, .alert, .dashboard-alert, .auth-feedback, .notification-status-message { animation: none !important; transition: none !important; } /* ============================================================== 02.30. SKELETON PLACEHOLDERS ============================================================== Remove shimmer but keep static loading shapes. Existing text such as "Loading verified data" must remain present in the markup where required. ============================================================== */ .skeleton, .skeleton-line, .skeleton-card, .loading-skeleton, .skeleton-shimmer, .loading-placeholder { animation: none !important; transition: none !important; } .skeleton-shimmer::before, .skeleton-shimmer::after, .loading-skeleton::before, .loading-skeleton::after { animation: none !important; } /* ============================================================== 02.31. LOADING SPINNERS ============================================================== Prevent repetitive spinning. Keep the loading region and accompanying text available to the user. Async completion must come from real application state, not from the spinner animation. ============================================================== */ .spinner, .loading-spinner, .chart-loading .spinner, .notification-loading .spinner, .receipt-loading .spinner, .admin-loading .spinner { animation: none !important; transition: none !important; } /* ============================================================== 02.32. DECORATIVE ANIMATIONS ============================================================== Explicitly support common visual effect classes. These are not financial-data rendering controls. ============================================================== */ .pulse, .is-pulsing, .glow-pulse, .glow-animation, .float-animation, .floating-effect, .bounce-animation, .shimmer-animation, .spin-animation, .animated-gradient { animation: none !important; } /* ============================================================== 02.33. PARALLAX AND DECORATIVE MOVEMENT ============================================================== Transform is reset only for elements explicitly designated as decorative movement layers. Do not reset transforms globally because other components use them for correct positioning. ============================================================== */ .parallax, .parallax-layer, .decorative-parallax, .floating-decoration { transform: none !important; animation: none !important; } /* ============================================================== 02.34. AUTO-SCROLLING DECORATIVE TICKERS ============================================================== If a future market-information ticker is added, reduce its visual motion. Verified data must remain reachable. Such a ticker must also have a non-moving accessible presentation provided by its frontend. ============================================================== */ .ticker-track, .marquee-track, .auto-scroll-track { animation: none !important; transform: none !important; } /* ============================================================== 02.35. KEYBOARD FOCUS PRESERVATION ============================================================== Disable animation, not focus indication. Never remove outlines in reduced-motion mode. ============================================================== */ :where( a[href], button, input, select, textarea, summary, [role="tab"], [role="button"] ):focus-visible { outline-style: solid; outline-width: var(--bsm-focus-width, 2px); outline-color: var(--bsm-focus-color, currentColor); outline-offset: var(--bsm-focus-offset, 2px); } } /* ========================================================================== 03. OPTIONAL IN-APP REDUCED-MOTION OVERRIDE ========================================================================== This is prepared for a future accessibility setting. Accepted root states: html[data-motion="reduce"] html[data-motion="reduced"] html.motion-reduce Do not use data-motion as an authentication or authorization control. The user must be able to change their preference independently of their trading subscription. ========================================================================== */ :is( html[data-motion="reduce"], html[data-motion="reduced"], html.motion-reduce ) { --bsm-motion-instant: 0ms; --bsm-motion-fast: 0ms; --bsm-motion-normal: 0ms; --bsm-motion-medium: 0ms; --bsm-motion-slow: 0ms; --bsm-motion-slower: 0ms; --bsm-motion-enter: 0ms; --bsm-motion-exit: 0ms; --bsm-motion-hover: 0ms; --bsm-motion-panel: 0ms; --bsm-motion-page: 0ms; scroll-behavior: auto !important; } /* ========================================================================== 04. MANUAL OVERRIDE — DISABLE CSS MOTION ========================================================================== Matches descendant elements and their pseudo-elements. This implements the optional in-app preference without needing later CSS patches. The actual preference and persistence, if offered, must be controlled by frontend application code. ========================================================================== */ :is( html[data-motion="reduce"], html[data-motion="reduced"], html.motion-reduce ) :is( *, *::before, *::after ) { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ========================================================================== 05. MANUAL OVERRIDE — NAVIGATION SCROLLING ========================================================================== */ :is( html[data-motion="reduce"], html[data-motion="reduced"], html.motion-reduce ) :is( #market-tabs, .market-tabs, .timeframe-tabs, .timeframe-list, .admin-nav, .notification-filters ) { scroll-snap-type: none !important; scroll-behavior: auto !important; } /* ========================================================================== 06. MANUAL OVERRIDE — SIGNAL PROGRESS ========================================================================== Animated progress is hidden in either reduced-motion mode because it would otherwise give a misleading representation of remaining time. Actual 30-second popup lifetime stays unchanged. ========================================================================== */ :is( html[data-motion="reduce"], html[data-motion="reduced"], html.motion-reduce ) :is( .signal-popup-progress, .popup-progress, .signal-alert-progress ) { display: none !important; } /* ========================================================================== 07. MANUAL OVERRIDE — DECORATIVE TRANSFORMS ========================================================================== Do not globally reset transform. Only known movement-oriented decorative elements are reset here. ========================================================================== */ :is( html[data-motion="reduce"], html[data-motion="reduced"], html.motion-reduce ) :is( .parallax, .parallax-layer, .decorative-parallax, .floating-decoration, .ticker-track, .marquee-track, .auto-scroll-track ) { transform: none !important; } /* ========================================================================== 08. MANUAL OVERRIDE — INTERACTIVE CARDS ========================================================================== */ :is( html[data-motion="reduce"], html[data-motion="reduced"], html.motion-reduce ) :is( .card-interactive:hover, .dashboard-card.card-interactive:hover, .admin-card.card-interactive:hover, .plan-card:hover ) { transform: none !important; } /* ========================================================================== 09. REDUCED TRANSPARENCY PREFERENCE ========================================================================== Some operating systems also provide a transparency preference. This is independent of reduced motion. Blur-heavy floating surfaces can be distracting, so use the established opaque theme colors. ========================================================================== */ @media (prefers-reduced-transparency: reduce) { .glass-panel, .glass-card, .glass-surface { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: var(--bsm-bg-surface, #10263A); } #notice-panel, .notice-panel, .notification-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: var(--bsm-bg-modal, #10263A); } #notice-backdrop, .notice-backdrop, .notification-backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ========================================================================== 10. REDUCED TRANSPARENCY IN MANUAL MODE ========================================================================== Optional: html[data-transparency="reduce"] This is purely a future visual preference. It does not alter any session or trading state. ========================================================================== */ html[data-transparency="reduce"] :is( .glass-panel, .glass-card, .glass-surface ) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: var(--bsm-bg-surface, #10263A); } html[data-transparency="reduce"] :is( #notice-panel, .notice-panel, .notification-panel ) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: var(--bsm-bg-modal, #10263A); } html[data-transparency="reduce"] :is( #notice-backdrop, .notice-backdrop, .notification-backdrop ) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ========================================================================== 11. PRINT MOTION SAFETY ========================================================================== No animations should run while printing. This does not reveal hidden notifications or protected receipt data. The dedicated print rules in the other stylesheets remain responsible for printed layout. ========================================================================== */ @media print { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } [hidden] { display: none !important; } } /* ========================================================================== 12. HIDDEN STATE INTEGRITY ========================================================================== Reduced motion does not override visibility rules. An element intentionally hidden with [hidden] must remain hidden. This is a defensive display rule. It is not server-side authorization. ========================================================================== */ [hidden], #notice-panel[hidden], #notice-backdrop[hidden], #signal-popup-stack[hidden], #receipt-modal[hidden] { display: none !important; } /* ========================================================================== 13. FINAL MOTION INTEGRATION CHECKLIST ========================================================================== SYSTEM PREFERENCES ------------------ [x] prefers-reduced-motion [x] prefers-reduced-transparency [x] Manual reduced-motion root state [x] Manual reduced-transparency root state NAVIGATION ---------- [x] Disable CSS smooth scrolling [x] Disable market-tab snap movement [x] Disable timeframe snap movement [x] Disable decorative menu transitions [x] Preserve keyboard focus [x] Preserve touch scrolling AUTHENTICATION -------------- [x] Login cards [x] Signup forms [x] Password controls [x] Administrator login [x] MFA input [x] Secure logout interfaces FOREX DASHBOARD --------------- [x] Chart panels [x] Chart CSS transitions [x] Indicator legends [x] Market selection [x] BUY/SELL market clues [x] Verified provider status [x] Signal history NOTIFICATIONS ------------- [x] Notification bell [x] Notification drawer [x] Notification history [x] Popup arrival animation [x] Popup exit animation [x] Animated 30-second progress [x] Preserve JavaScript popup lifetime [x] Preserve manual dismissal [x] Preserve receipt access controls RECEIPTS -------- [x] Modal entrance [x] Modal exit [x] Confidence bar transitions [x] Receipt control focus [x] Readable static evidence ECONOMIC NEWS ------------- [x] CPI countdown visual transitions [x] Event card motion [x] News risk visual states [x] Preserve actual countdown updates ADMINISTRATION -------------- [x] Sidebar navigation [x] Responsive admin menu [x] Admin cards [x] Metrics [x] Tables [x] Form controls [x] Payment review interface LOADING ------- [x] Static skeletons [x] Static spinner presentation [x] No shimmer [x] Preserve actual loading state ACCESSIBILITY ------------- [x] Visible keyboard focus [x] No global transform reset [x] No color-only signal dependency [x] No CSS-only notification dismissal [x] Hidden attributes preserved [x] Print motion disabled ========================================================================== IMPORTANT FRONTEND IMPLEMENTATION CONTRACT ========================================================================== The future JavaScript modules must check the active reduced-motion preference for JavaScript-driven motion. In particular: 1. Do not animate candlestick geometry unnecessarily. 2. Do not automatically scroll long distances using smooth scrolling in reduced-motion mode. 3. Keep market selection instantaneous when requested. 4. Do not require CSS animationend events to finalize a notification, close a modal, or update a status. 5. Use actual application timing for popup dismissal. 6. Continue to display confirmed BUY/SELL notifications from ANY pair in the selected authorized market. 7. Keep other-market notifications as aggregate market-tab clues only. 8. Never automatically change the displayed chart pair. 9. Continue updating accurate economic countdown values. 10. Keep every account, permission, payment, and market-access decision inside private backend services. ========================================================================== FINAL RULE REDUCED MOTION MEANS: Less unnecessary visual movement. IT DOES NOT MEAN: Less accurate data. Delayed trading updates. Missing signals. Shorter signal-popup duration. Disabled notifications. Disabled financial calculations. Weaker security. ========================================================================== END OF BALOCH SM REDUCED MOTION STYLESHEET ========================================================================== */