*/
/* Prevent Text Truncation
* Ensure text is never cut off or hidden from users */
/**
* WCAG 1.4.4 Resize Text and 1.4.10 Reflow require that text
* remains visible and readable when:
* - User increases font size up to 200%
* - User zooms to 400%
* - Viewport is as narrow as 320px
*
* Common causes of text truncation:
* - Fixed heights on containers
* - text-overflow: ellipsis without expansion mechanism
* - Absolute positioning
* - Hidden overflow
*/
/* === PREVENT FIXED HEIGHTS === */
/* Never use fixed height on text containers */
p,
div,
span,
li,
td,
th,
label,
button,
a {
height: auto; /* Never fixed height */
min-height: 0; /* Can shrink to content */
}
/* Allow containers to grow with content */
.content,
.wrapper,
.container,
.box,
.card {
height: auto;
min-height: 0;
}
/* === OVERFLOW HANDLING === */
/* Text containers should show overflow, not hide it */
p,
div,
span,
li,
blockquote {
overflow: visible; /* Show all text */
}
/* === WORD BREAKING === */
/* Long words must break to prevent horizontal overflow */
p,
li,
td,
th,
div,
span,
label {
overflow-wrap: break-word; /* Break long words */
word-wrap: break-word; /* Legacy support */
word-break: break-word; /* Alternative breaking */
hyphens: auto; /* Enable hyphenation */
}
/* Headings also need word breaking */
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
/* URLs and long strings */
a {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all; /* More aggressive for URLs */
}
/* === ELLIPSIS - USE CAREFULLY === */
/**
* text-overflow: ellipsis is acceptable ONLY if:
* 1. Full text is available on hover/focus, OR
* 2. Full text is available via expansion mechanism, OR
* 3. Truncated text is decorative/supplementary only
*
* NEVER use ellipsis for critical information
*/
/* Acceptable ellipsis pattern - expandable */
.truncate-expandable {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
cursor: pointer;
}
/* Show full text on hover/focus */
.truncate-expandable:hover,
.truncate-expandable:focus {
overflow: visible;
white-space: normal;
word-wrap: break-word;
}
/* Alternative: tooltip shows full text */
.truncate-with-tooltip {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.truncate-with-tooltip[title]:hover::after,
.truncate-with-tooltip[aria-label]:hover::after {
/* Full text shown in browser tooltip via title attribute */
/* Or custom tooltip implementation */
}
/* === LINE CLAMPING - USE CAREFULLY === */
/* Multi-line truncation (must have expansion mechanism) */
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3; /* Show 3 lines */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Expandable line clamp */
.line-clamp-expandable {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
cursor: pointer;
}
.line-clamp-expandable.expanded {
display: block;
-webkit-line-clamp: unset;
}
/* "Read more" button pattern */
.read-more-wrapper {
position: relative;
}
.read-more-content.collapsed {
max-height: 150px; /* ~5 lines at 1.5 line-height */
overflow: hidden;
position: relative;
}
.read-more-content.collapsed::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3em;
background: linear-gradient(transparent, white);
}
.read-more-button {
margin-top: 0.5rem;
/* Button styling from previous sections */
}
/* === WHITE SPACE HANDLING === */
/* Never force nowrap without overflow handling */
.nowrap-safe {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* But prefer wrapping for accessibility */
.prefer-wrap {
white-space: normal;
overflow-wrap: break-word;
}
/* Pre-formatted text wraps where possible */
pre {
white-space: pre-wrap; /* Wrap long lines */
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Code blocks wrap */
code {
white-space: pre-wrap;
word-wrap: break-word;
}
/* Inline code can break */
p code,
li code {
white-space: normal;
word-break: break-all;
}
/* === BUTTONS AND CONTROLS === */
/* Button text must wrap, never truncate */
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"] {
white-space: normal; /* Allow wrapping (set in earlier section) */
overflow-wrap: break-word;
height: auto; /* Grow with content */
}
/* Links in buttons */
a[role="button"] {
white-space: normal;
overflow-wrap: break-word;
}
/* === LABELS AND FORM TEXT === */
/* Labels must show full text */
label {
white-space: normal;
overflow-wrap: break-word;
height: auto;
}
/* Placeholder text (never truncate critical info) */
::placeholder {
white-space: normal;
overflow: visible;
}
/* Help text and error messages */
.help-text,
.error-message,
[role="alert"] {
white-space: normal;
overflow-wrap: break-word;
overflow: visible;
}
/* === NAVIGATION === */
/* Nav items wrap if needed */
nav a,
nav button {
white-space: normal;
overflow-wrap: break-word;
}
/* Breadcrumbs wrap */
.breadcrumb {
white-space: normal;
overflow-wrap: break-word;
}
.breadcrumb a {
overflow-wrap: break-word;
word-break: break-all; /* URLs can break aggressively */
}
/* === TOOLTIPS AND POPOVERS === */
/* Tooltips must never truncate */
[role="tooltip"],
.tooltip {
white-space: normal;
max-width: 300px; /* Reasonable max */
overflow-wrap: break-word;
overflow: visible;
}
/* === CARDS AND BOXES === */
/* Card titles and content */
.card-title,
.card-content,
.box-content {
overflow-wrap: break-word;
word-wrap: break-word;
height: auto;
}
/* Card descriptions */
.card-description {
white-space: normal;
overflow: visible;
overflow-wrap: break-word;
}
/* === AVOID PROBLEMATIC PATTERNS === */
/* BAD: Fixed height + hidden overflow = text loss */
/* NEVER do this:
.bad-example {
height: 100px;
overflow: hidden;
}
*/
/* GOOD: Let height grow with content */
.good-example {
min-height: 100px; /* Minimum, but can grow */
max-height: none; /* No maximum */
overflow: visible; /* Show all content */
}
/* BAD: Ellipsis without expansion mechanism */
/* AVOID this:
.bad-truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
*/
/* GOOD: Ellipsis with hover expansion */
.good-truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.good-truncate:hover,
.good-truncate:focus {
white-space: normal;
overflow: visible;
}
/* === ACCESSIBILITY FOR SCREEN READERS === */
/* Visually hidden text (still available to screen readers) */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Full text for screen readers when using ellipsis */
.truncated-visible[aria-label] {
/* Visual truncation */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* aria-label contains full text for screen readers */
/* === ZOOM AND FONT SIZE ADJUSTMENTS === */
/* Ensure containers grow when text size increases */
@media (min-resolution: 192dpi) {
/* High DPI - text may render larger */
* {
height: auto;
}
}
/* === FLEXBOX CONSIDERATIONS === */
/* Flex items with text must not shrink below content size */
.flex > * {
min-width: 0; /* Allow shrinking */
flex-shrink: 1; /* Can shrink */
overflow-wrap: break-word; /* But break words instead of overflow */
}
/* === GRID CONSIDERATIONS === */
/* Grid items with text */
.grid > * {
min-width: 0; /* Allow shrinking */
overflow-wrap: break-word; /* Break words */
overflow: visible; /* Show all content */
}
/* === CRITICAL REMINDERS === */
/**
* Text truncation checklist:
*
* ✓ Never use fixed heights on text containers
* ✓ Never hide overflow without expansion mechanism
* ✓ Always allow word breaking (overflow-wrap: break-word)
* ✓ Use white-space: normal (not nowrap) by default
* ✓ If using ellipsis, provide hover/focus expansion OR tooltip
* ✓ If using line-clamp, provide "Read more" expansion
* ✓ Test at 200% font size and 400% zoom
* ✓ Ensure critical information is never truncated
* ✓ Screen reader users get full text via aria-label if needed
*/
/* Avoid Absolute Positioning Issues
* Prevent absolute positioning from causing content overlap or loss */
/**
* WCAG 1.4.10 Reflow requires content to remain accessible at 320px width
* and 400% zoom. Absolute positioning can cause:
* - Content overlap (obscuring text)
* - Content pushed off-screen
* - Broken layouts at different viewport sizes
*
* Guidelines:
* 1. Prefer normal flow (static/relative positioning)
* 2. Use flexbox/grid instead of absolute positioning
* 3. If absolute positioning required, ensure content reflows
* 4. Test at multiple zoom levels and viewport sizes
*/
/* === PREFER NORMAL DOCUMENT FLOW === */
/* Default positioning for most elements */
* {
position: static; /* Default: normal flow */
}
/* Relative positioning is safe (stays in flow) */
.relative {
position: relative; /* Creates positioning context */
}
/* === SAFE ABSOLUTE POSITIONING PATTERNS === */
/* Absolutely positioned element within relative container */
.positioned-container {
position: relative; /* Positioning context */
padding: 1rem; /* Space for absolute children */
}
.positioned-child {
position: absolute;
/* Must specify where positioned */
top: 0;
right: 0;
/* Or bottom/left as needed */
}
/* Ensure absolute elements don't obscure content */
.positioned-container {
padding-top: 3rem; /* Make room if child is top-positioned */
/* Adjust based on child size and position */
}
/* === ICON POSITIONING (COMMON USE CASE) === */
/* Icon inside button/link */
.button-with-icon {
position: relative;
padding-left: 2.5rem; /* Space for icon */
}
.button-with-icon .icon {
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%); /* Center vertically */
}
/* Close button on modals/alerts */
.modal,
.alert {
position: relative;
padding: 1rem;
padding-top: 3rem; /* Space for close button */
}
.close-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
/* min-height: 24px from Interactive Element Sizing */
}
/* === BADGE/NOTIFICATION POSITIONING === */
/* Badge on avatar or icon */
.badge-container {
position: relative;
display: inline-block;
}
.badge {
position: absolute;
top: -0.5rem;
right: -0.5rem;
min-width: 1.25rem;
min-height: 1.25rem;
border-radius: 50%;
/* Badge is supplementary, not critical content */
}
/* === DROPDOWN MENUS === */
/* Dropdown wrapper */
.dropdown {
position: relative;
}
/* Dropdown menu */
.dropdown-menu {
position: absolute;
top: 100%; /* Below trigger */
left: 0;
z-index: 1000;
min-width: 200px;
max-width: 100vw; /* Don't exceed viewport */
background: #ffffff;
border: 1px solid var(--input-border, #767676);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Dropdown right-aligned */
.dropdown-menu-right {
left: auto;
right: 0;
}
/* Responsive: dropdowns go full-width on mobile */
@media (max-width: 767px) {
.dropdown-menu {
position: static; /* Remove absolute positioning */
width: 100%;
max-width: 100%;
}
}
/* === TOOLTIPS === */
/* Tooltip container */
.tooltip-container {
position: relative;
display: inline-block;
}
/* Tooltip */
.tooltip,
[role="tooltip"] {
position: absolute;
z-index: 1001;
bottom: 100%; /* Above trigger */
left: 50%;
transform: translateX(-50%); /* Center horizontally */
max-width: 300px;
min-width: 150px;
padding: 0.5rem;
background: #333333;
color: #ffffff;
border-radius: 4px;
white-space: normal; /* Allow wrapping */
word-wrap: break-word;
}
/* Tooltip arrow */
.tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333333;
}
/* Tooltip adjusts position if off-screen */
.tooltip-bottom {
bottom: auto;
top: 100%; /* Below trigger instead */
}
.tooltip-bottom::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: #333333;
}
/* Mobile: tooltips become static */
@media (max-width: 767px) {
.tooltip,
[role="tooltip"] {
position: static;
transform: none;
display: block;
margin-top: 0.5rem;
}
.tooltip::after {
display: none; /* No arrow needed */
}
}
/* === MODALS AND OVERLAYS === */
/* Modal overlay (covers entire viewport) */
.modal-overlay {
position: fixed; /* Fixed is acceptable for overlays */
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto; /* Allow scrolling if modal is tall */
}
/* Modal dialog */
.modal-dialog {
position: relative; /* Not absolute, positioned by flex parent */
max-width: 600px;
width: 90%; /* Responsive width */
max-height: 90vh; /* Don't exceed viewport */
overflow-y: auto; /* Scroll if content is tall */
background: #ffffff;
padding: 2rem;
margin: 2rem auto;
}
/* Ensure modal is keyboard accessible */
.modal-dialog:focus {
outline: 2px solid var(--button-bg, #0066cc);
outline-offset: 2px;
}
/* === STICKY POSITIONING (SAFER ALTERNATIVE) === */
/* Sticky headers/navigation */
.sticky-header {
position: sticky; /* Sticky is safer than fixed */
top: 0;
z-index: 100;
background: #ffffff;
}
/* Sticky navigation */
.sticky-nav {
position: sticky;
top: 0;
z-index: 99;
}
/* Sticky sidebar */
.sticky-sidebar {
position: sticky;
top: 2rem; /* Offset from top */
align-self: flex-start; /* In flex container */
}
/* Mobile: remove sticky behavior */
@media (max-width: 767px) {
.sticky-header,
.sticky-nav,
.sticky-sidebar {
position: static; /* Normal flow on mobile */
}
}
/* === FIXED POSITIONING - USE SPARINGLY === */
/* Fixed position can obscure content at zoom */
/* Use only for critical UI elements */
/* Skip link (always visible) */
.skip-link {
position: fixed; /* Fixed is acceptable here */
top: 0;
left: 0;
z-index: 9999;
transform: translateY(-100%); /* Off-screen by default */
}
.skip-link:focus {
transform: translateY(0); /* Visible on focus */
}
/* Floating action button */
.fab {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 100;
/* min-height: 24px from Interactive Element Sizing */
/* Actually FABs are typically 48-56px for touch targets */
min-width: 48px;
min-height: 48px;
}
/* Mobile: fixed elements can be problematic */
@media (max-width: 767px) {
.fab {
bottom: 1rem;
right: 1rem;
/* Ensure doesn't obscure content */
}
}
/* === PREVENT CONTENT OVERLAP === */
/* When using absolute positioning, parent must reserve space */
.has-absolute-child {
position: relative;
/* Add padding/margin to prevent overlap */
padding-top: 3rem; /* Example for top-positioned child */
}
/* Z-index layering (avoid conflicts) */
:root {
--z-dropdown: 1000;
--z-sticky: 1020;
--z-modal: 1030;
--z-tooltip: 1040;
--z-notification: 1050;
}
.dropdown-menu { z-index: var(--z-dropdown); }
.sticky-header { z-index: var(--z-sticky); }
.modal-overlay { z-index: var(--z-modal); }
.tooltip { z-index: var(--z-tooltip); }
.notification { z-index: var(--z-notification); }
/* === AVOID COMMON PITFALLS === */
/* BAD: Absolute positioning without relative parent */
/* NEVER do this:
.bad-absolute {
position: absolute;
top: 20px;
right: 20px;
}
*/
/* This positions relative to viewport, breaks at different sizes */
/* GOOD: Absolute within relative parent */
.good-parent {
position: relative;
}
.good-absolute {
position: absolute;
top: 1rem;
right: 1rem;
}
/* BAD: Fixed positioning that obscures content */
/* AVOID this:
.bad-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
}
*/
/* Body content will be hidden under this */
/* GOOD: Sticky positioning or body padding */
.good-sticky {
position: sticky;
top: 0;
}
body.has-fixed-header {
padding-top: 100px; /* Make room for fixed header */
}
/* === FLEXBOX/GRID ALTERNATIVES === */
/* Instead of absolute positioning for layout, use flex/grid */
/* BAD: Absolute positioning for columns */
/* AVOID this pattern */
/* GOOD: Flexbox for columns */
.flex-layout {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.flex-layout > .column {
flex: 1 1 calc(50% - 0.5rem);
min-width: 300px;
}
/* GOOD: Grid for layout */
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
/* === RESPONSIVE CONSIDERATIONS === */
/* Absolute positioning often needs adjustment at different breakpoints */
@media (max-width: 767px) {
/* Convert absolute to static on mobile when appropriate */
.mobile-static {
position: static !important;
}
/* Reduce z-index stacking on mobile */
.modal-overlay {
z-index: 999;
}
}
/* === TESTING CHECKLIST === */
/**
* When using absolute/fixed positioning:
*
* ✓ Test at 320px viewport width
* ✓ Test at 400% zoom
* ✓ Ensure no content is obscured or inaccessible
* ✓ Check keyboard navigation still works
* ✓ Verify focus indicators visible
* ✓ Test with screen reader
* ✓ Ensure positioned elements have proper contrast
* ✓ Check that positioned elements don't break on text resize
* ✓ Verify touch targets meet 24x24px minimum
* ✓ Consider mobile-first approach (static → absolute)
*/
/* Motion & Animation (WCAG 2.3.3, 2.2.2)
* Respect user motion preferences and provide controls */
/**
* WCAG Requirements:
* - 2.3.3 Animation from Interactions (AAA): Motion triggered by interaction
* can be disabled unless essential to functionality
* - 2.2.2 Pause, Stop, Hide (A): Moving, blinking, scrolling content that
* lasts more than 5 seconds can be paused, stopped, or hidden
* - Vestibular disorders: Motion can cause nausea, dizziness, headaches
*
* Subsections to cover:
*/
/* Prefers-Reduced-Motion Media Query
* Primary mechanism for respecting user motion preferences */
/**
* The prefers-reduced-motion media query detects OS-level accessibility settings:
* - Windows: Settings > Ease of Access > Display > Show animations
* - macOS: System Preferences > Accessibility > Display > Reduce motion
* - iOS/Android: Similar accessibility settings
*
* When user enables "reduce motion", this media query matches and we should:
* - Remove or significantly reduce animations
* - Use instant state changes instead of transitions
* - Provide static alternatives to animated content
*
* Default approach: Assume motion is OKAY, then override for reduced-motion
*/
/* === GLOBAL MOTION RESET === */
/**
* Nuclear option: Disable ALL animations for reduced-motion users
* This is the safest baseline approach
*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/**
* Why 0.01ms instead of 0s?
* - Some browsers/libraries check for animation-duration: 0 as "no animation set"
* - Using 0.01ms triggers the animation but completes essentially instantly
* - Ensures JavaScript event listeners still fire (animationend, transitionend)
*/
/* === SELECTIVE MOTION PRESERVATION === */
/**
* Alternative approach: Keep some subtle animations even in reduced-motion
* Only use for truly essential or very subtle effects
*/
/* Safe animations that can remain (opacity, color) */
@media (prefers-reduced-motion: reduce) {
.safe-fade {
/* Opacity transitions are generally safe */
transition: opacity 0.15s ease-in-out !important;
/* But remove any transform/translate */
transform: none !important;
}
.safe-color {
/* Color transitions are safe */
transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out !important;
}
}
/* === MOTION-SAFE MEDIA QUERY === */
/**
* Modern alternative: Use @media (prefers-reduced-motion: no-preference)
* to ONLY apply animations when motion is safe
*
* This is the "progressive enhancement" approach:
* - Start with no animations (works for everyone)
* - Add animations ONLY for users who are okay with motion
*/
/* Example: Only animate when motion is safe */
@media (prefers-reduced-motion: no-preference) {
.animated-element {
transition: transform 0.3s ease-in-out;
}
.animated-element:hover {
transform: translateY(-4px);
}
}
/* When motion should be reduced, no animation happens */
@media (prefers-reduced-motion: reduce) {
.animated-element:hover {
/* Instant state change, no animation */
transform: none;
/* Could apply other non-motion feedback like color change */
background-color: #f0f0f0;
}
}
/* === SCROLL BEHAVIOR === */
/**
* Smooth scrolling can be problematic for vestibular disorders
* Disable for reduced-motion users
*/
/* Enable smooth scroll by default */
html {
scroll-behavior: smooth;
}
/* Disable smooth scroll for reduced-motion */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* === ANIMATION PLAY STATE === */
/**
* For CSS animations that are already running,
* pause them when reduced-motion is preferred
*/
/* Running animation by default */
.animated-background {
animation: background-shift 10s ease-in-out infinite;
}
/* Pause animation for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animated-background {
animation-play-state: paused;
/* Or remove entirely */
animation: none;
}
}
/* === FOCUS INDICATORS === */
/**
* Focus indicators should remain visible even with reduced-motion
* But the transition to focus state can be instant
*/
/* Default: smooth transition to focus state */
a:focus,
button:focus {
outline: 2px solid var(--button-bg, #0066cc);
outline-offset: 2px;
transition: outline-offset 0.15s ease-in-out;
}
/* Reduced motion: instant focus state */
@media (prefers-reduced-motion: reduce) {
a:focus,
button:focus {
transition: none;
}
}
/* === LOADING STATES === */
/**
* Loading indicators need special handling
* Provide static alternative for reduced-motion
*/
/* Animated spinner (default) */
.loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Static loading indicator for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.loading-spinner {
animation: none;
/* Show pulsing opacity instead */
animation: pulse-opacity 2s ease-in-out infinite;
}
@keyframes pulse-opacity {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
}
/* Or completely static alternative */
@media (prefers-reduced-motion: reduce) {
.loading-spinner.static-only {
animation: none;
opacity: 0.7; /* Just show static dimmed state */
}
}
/* === PARALLAX EFFECTS === */
/**
* Parallax is a major vestibular trigger
* MUST be disabled for reduced-motion
*/
/* Parallax enabled by default */
.parallax-layer {
transform: translateY(var(--parallax-offset));
transition: transform 0.1s linear;
}
/* Disable parallax for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.parallax-layer {
transform: none !important;
transition: none !important;
}
}
/* === VIDEO AUTOPLAY === */
/**
* Autoplaying video can be problematic
* Consider pausing for reduced-motion users
* Note: This requires JavaScript, but CSS can hide controls
*/
/* Show pause control prominently for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.video-pause-control {
display: block !important;
/* Make it very visible */
font-size: 1.2em;
font-weight: bold;
}
}
/* === HOVER EFFECTS === */
/**
* Subtle hover effects can remain, but remove motion components
*/
/* Default: lift effect on hover */
.card {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
/* Reduced motion: only shadow change, no transform */
@media (prefers-reduced-motion: reduce) {
.card {
transition: box-shadow 0.2s ease-in-out;
}
.card:hover {
transform: none;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
}
/* === TESTING SUPPORT === */
/**
* Utility class to test reduced-motion styles
* Can be toggled via JavaScript for testing
*/
/* Simulate reduced-motion for testing */
.force-reduced-motion,
.force-reduced-motion *,
.force-reduced-motion *::before,
.force-reduced-motion *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* === JAVASCRIPT DETECTION === */
/**
* For cases where CSS alone isn't enough,
* JavaScript can detect the preference:
*
* const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
*
* if (prefersReducedMotion.matches) {
* // User prefers reduced motion
* // Disable complex animations
* // Pause autoplaying content
* }
*
* // Listen for changes
* prefersReducedMotion.addEventListener('change', (e) => {
* if (e.matches) {
* // User just enabled reduced motion
* }
* });
*/
/* === BROWSER SUPPORT === */
/**
* Browser support (as of 2024):
* - Chrome/Edge: 74+ (April 2019)
* - Firefox: 63+ (October 2018)
* - Safari: 10.1+ (March 2017)
* - iOS Safari: 10.3+ (March 2017)
*
* Excellent support - safe to use without fallback
* Older browsers ignore the media query (animations run normally)
*/
/* === BEST PRACTICES SUMMARY === */
/**
* Recommended approach:
*
* 1. Use global reset (@media prefers-reduced-motion: reduce) for all animations
* 2. OR use progressive enhancement (only animate with no-preference)
* 3. Keep essential focus indicators (but instant transition)
* 4. Provide static alternatives for loading indicators
* 5. Remove all parallax and large motion effects
* 6. Keep subtle color/opacity transitions if desired
* 7. Test with OS motion settings enabled
* 8. Use JavaScript for complex animation controls
*/
/* Safe Animation Defaults
* Animations that are generally safe for all users */
/**
* Not all animations trigger vestibular disorders
* Safe animation types:
* - Opacity changes (fade in/out)
* - Color transitions
* - Small scale changes (< 10% size change)
* - Very short durations (< 0.2s)
*
* UNSAFE animation types (avoid or disable for reduced-motion):
* - Large movements (sliding, flying in)
* - Rotation (spinning, flipping)
* - Parallax effects
* - Continuous/infinite motion
* - Scaling > 10%
* - Any motion that simulates 3D space
*/
/* === OPACITY TRANSITIONS (SAFEST) === */
/**
* Fading is the safest animation type
* Causes minimal vestibular disruption
*/
/* Fade in/out - safe for all users */
.fade {
transition: opacity 0.15s ease-in-out;
}
.fade-in {
opacity: 0;
animation: fadeIn 0.3s ease-in forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-out {
opacity: 1;
animation: fadeOut 0.3s ease-out forwards;
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Cross-fade between states */
.cross-fade {
transition: opacity 0.2s ease-in-out;
}
/* Subtle opacity pulse (very gentle) */
.pulse-subtle {
animation: pulseSubtle 2s ease-in-out infinite;
}
@keyframes pulseSubtle {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
/* Even these safe animations should respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.fade-in,
.fade-out {
animation: none;
opacity: 1; /* Show immediately */
}
.pulse-subtle {
animation: none;
opacity: 1; /* Static */
}
}
/* === COLOR TRANSITIONS (SAFE) === */
/**
* Color changes are generally safe
* No spatial movement = no vestibular trigger
*/
/* Background color transition */
.color-transition {
transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
}
/* Border color transition */
.border-transition {
transition: border-color 0.2s ease-in-out;
}
/* Safe for hover states */
.safe-hover {
background-color: #ffffff;
transition: background-color 0.15s ease-in-out;
}
.safe-hover:hover {
background-color: #f0f0f0;
}
/* Color pulse (safe continuous animation) */
.color-pulse {
animation: colorPulse 3s ease-in-out infinite;
}
@keyframes colorPulse {
0%, 100% { background-color: #e3f2fd; }
50% { background-color: #bbdefb; }
}
/* These are safe but still should be instant for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.color-transition,
.border-transition,
.safe-hover {
transition-duration: 0.01ms;
}
.color-pulse {
animation: none;
background-color: #e3f2fd; /* Static color */
}
}
/* === SMALL SCALE CHANGES (CAUTIOUS) === */
/**
* Very small scale changes (< 1.1x) are generally acceptable
* Larger scaling can trigger motion sensitivity
*/
/* Subtle scale on hover (< 10% change) */
.scale-subtle {
transition: transform 0.15s ease-in-out;
}
.scale-subtle:hover {
transform: scale(1.05); /* Only 5% larger */
}
/* Subtle shrink on active/click */
.scale-active {
transition: transform 0.1s ease-in-out;
}
.scale-active:active {
transform: scale(0.97); /* Slight press effect */
}
/* Remove all scaling for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.scale-subtle:hover,
.scale-active:active {
transform: none;
}
}
/* === BOX SHADOW TRANSITIONS (SAFE) === */
/**
* Shadow changes don't involve motion
* Safe alternative to transform animations
*/
/* Shadow transition for depth */
.shadow-transition {
transition: box-shadow 0.2s ease-in-out;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.shadow-transition:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
/* Glow effect (safe) */
.glow-transition {
transition: box-shadow 0.2s ease-in-out;
}
.glow-transition:focus {
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}
/* Safe for reduced-motion (just make instant) */
@media (prefers-reduced-motion: reduce) {
.shadow-transition,
.glow-transition {
transition-duration: 0.01ms;
}
}
/* === BORDER TRANSITIONS (SAFE) === */
/**
* Border width, style, color changes are safe
*/
/* Border width transition */
.border-grow {
border: 1px solid #ccc;
transition: border-width 0.15s ease-in-out;
}
.border-grow:hover {
border-width: 2px;
}
/* Underline animation (border-bottom) */
.underline-transition {
border-bottom: 2px solid transparent;
transition: border-bottom-color 0.2s ease-in-out;
}
.underline-transition:hover {
border-bottom-color: var(--link-color, #0066cc);
}
/* Safe for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.border-grow,
.underline-transition {
transition-duration: 0.01ms;
}
}
/* === WIDTH/HEIGHT TRANSITIONS (CAUTIOUS) === */
/**
* Width/height changes can be safe if:
* - Change is small (< 20%)
* - Duration is short (< 0.2s)
* - Not continuous/looping
*/
/* Progress bar fill (safe horizontal growth) */
.progress-bar {
width: 0;
transition: width 0.3s ease-out;
}
.progress-bar.filled {
width: 100%;
}
/* Expand/collapse content (vertical motion) */
.expandable {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.expandable.expanded {
max-height: 500px; /* Or auto with JavaScript */
}
/* Disable for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.expandable {
transition: none;
}
.expandable.expanded {
max-height: none; /* Show immediately */
}
}
/* === SAFE TIMING FUNCTIONS === */
/**
* Timing functions affect perception of motion
* Linear feels more mechanical/harsh
* Ease functions feel more natural
*/
:root {
/* Safe easing curves */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Gentler easings for motion-sensitive users */
--ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Use gentle easing by default */
.safe-animation {
transition-timing-function: var(--ease-gentle);
}
/* === SAFE DURATION GUIDELINES === */
/**
* Duration recommendations:
* - 0.1s - 0.15s: Very quick (buttons, links)
* - 0.15s - 0.3s: Standard (most transitions)
* - 0.3s - 0.5s: Slower (complex state changes)
* - > 0.5s: Avoid (feels sluggish, can trigger discomfort)
*
* Shorter is generally safer
*/
:root {
--duration-instant: 0.1s;
--duration-fast: 0.15s;
--duration-normal: 0.2s;
--duration-slow: 0.3s;
--duration-slower: 0.5s;
}
/* Quick interactions */
.quick-transition {
transition-duration: var(--duration-fast);
}
/* Standard transitions */
.normal-transition {
transition-duration: var(--duration-normal);
}
/* === SAFE COMBINATION ANIMATIONS === */
/**
* Combining safe animation types
* Opacity + color = safe
* Opacity + small scale = borderline (use cautiously)
*/
/* Fade + color change (safe) */
.fade-color {
transition: opacity 0.2s ease-in-out,
background-color 0.2s ease-in-out;
}
/* Fade + very small scale (use cautiously) */
.fade-scale-subtle {
transition: opacity 0.2s ease-in-out,
transform 0.2s ease-in-out;
}
.fade-scale-subtle:hover {
opacity: 0.9;
transform: scale(1.03); /* Very subtle */
}
/* Remove transforms for reduced-motion, keep opacity/color */
@media (prefers-reduced-motion: reduce) {
.fade-scale-subtle {
transition: opacity 0.01ms,
background-color 0.01ms;
}
.fade-scale-subtle:hover {
transform: none;
}
}
/* === SAFE LOADING ANIMATIONS === */
/**
* Loading indicators that are relatively safe
* Pulsing opacity > spinning
*/
/* Pulsing dots (safer than spinner) */
.loading-dots {
display: inline-flex;
gap: 0.5rem;
}
.loading-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--button-bg, #0066cc);
animation: dotPulse 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes dotPulse {
0%, 80%, 100% { opacity: 0.3; }
40% { opacity: 1; }
}
/* Static for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.loading-dots span {
animation: none;
opacity: 0.7; /* Static medium opacity */
}
}
/* === SAFE FOCUS ANIMATIONS === */
/**
* Focus indicators can use safe animations
* But must remain visible even if animation is disabled
*/
/* Focus with outline growth (safe) */
.focus-safe {
outline: 2px solid transparent;
outline-offset: 2px;
transition: outline-color 0.15s ease-in-out;
}
.focus-safe:focus {
outline-color: var(--button-bg, #0066cc);
}
/* Focus glow (safe) */
.focus-glow {
transition: box-shadow 0.15s ease-in-out;
}
.focus-glow:focus {
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}
/* Instant for reduced-motion, but still visible */
@media (prefers-reduced-motion: reduce) {
.focus-safe,
.focus-glow {
transition: none;
}
}
/* === GUIDELINES SUMMARY === */
/**
* Safe Animation Checklist:
*
* ✓ SAFE (minimal or no reduction needed):
* - Opacity changes (fade)
* - Color transitions
* - Box shadow changes
* - Border changes
* - Very small scale (< 1.1x)
*
* ⚠ CAUTIOUS (consider disabling for reduced-motion):
* - Small transforms (< 10px movement)
* - Moderate scale changes (1.1x - 1.3x)
* - Width/height transitions
* - Rotate < 45 degrees
*
* ✗ UNSAFE (must disable for reduced-motion):
* - Large movements (sliding, flying)
* - Spinning/rotation
* - Parallax
* - Continuous motion
* - 3D transforms
* - Scale > 1.3x
* - Anything > 0.5s duration
*
* Default stance: When in doubt, disable for reduced-motion
*/
/* Transition Properties
* CSS transitions for interactive states and UI feedback */
/**
* Transitions provide smooth state changes for interactive elements
* Applied to: hover, focus, active, disabled states
*
* Best practices:
* - Keep durations short (0.1s - 0.3s)
* - Transition specific properties, not "all"
* - Use appropriate easing functions
* - Always respect reduced-motion preference
*/
/* === BASIC TRANSITION SYNTAX === */
/**
* transition: property duration timing-function delay;
*
* Examples:
* transition: background-color 0.2s ease-in-out;
* transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
* transition: opacity 0.15s ease-out, color 0.15s ease-out;
*/
/* === BUTTON TRANSITIONS === */
/* Standard button transitions */
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"] {
transition: background-color 0.15s ease-in-out,
color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
/* Button hover state */
button:hover {
background-color: var(--button-hover-bg, #0052a3);
}
/* Button active/pressed state */
button:active {
/* Instant feedback - very short duration */
transition-duration: 0.1s;
}
/* Button focus state */
button:focus {
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}
/* Disabled buttons - no transition needed */
button:disabled {
transition: none;
cursor: not-allowed;
}
/* Remove transitions for reduced-motion */
@media (prefers-reduced-motion: reduce) {
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"] {
transition: none;
}
}
/* === LINK TRANSITIONS === */
/* Link color and underline transitions */
a {
transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-bottom-color 0.15s ease-in-out;
}
/* Link hover */
a:hover {
color: var(--link-hover, #004999);
}
/* Link with underline animation */
a.underline-animate {
border-bottom: 2px solid transparent;
transition: border-bottom-color 0.2s ease-in-out;
}
a.underline-animate:hover {
border-bottom-color: currentColor;
}
/* Remove for reduced-motion */
@media (prefers-reduced-motion: reduce) {
a,
a.underline-animate {
transition: none;
}
}
/* === FORM INPUT TRANSITIONS === */
/* Text inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea {
transition: border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out,
background-color 0.15s ease-in-out;
}
/* Input focus state */
input:focus,
textarea:focus {
border-color: var(--input-border-focus, #0066cc);
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
/* Input error state */
input.error,
textarea.error {
border-color: #d32f2f;
}
input.error:focus,
textarea.error:focus {
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}
/* Select dropdowns */
select {
transition: border-color 0.15s ease-in-out,
background-color 0.15s ease-in-out;
}
/* Checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
transition: background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out;
}
/* Remove for reduced-motion */
@media (prefers-reduced-motion: reduce) {
input,
textarea,
select {
transition: none;
}
}
/* === FOCUS INDICATOR TRANSITIONS === */
/* Universal focus transition */
*:focus {
transition: outline-color 0.15s ease-in-out,
outline-offset 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
/* Focus visible (keyboard navigation only) */
*:focus-visible {
outline: 2px solid var(--button-bg, #0066cc);
outline-offset: 2px;
}
/* Remove for reduced-motion but keep outline visible */
@media (prefers-reduced-motion: reduce) {
*:focus,
*:focus-visible {
transition: none;
}
}
/* === CARD AND BOX TRANSITIONS === */
/* Card hover effects */
.card {
transition: box-shadow 0.2s ease-in-out,
border-color 0.2s ease-in-out;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
/* Interactive card (clickable) */
.card-interactive {
transition: box-shadow 0.2s ease-in-out,
background-color 0.2s ease-in-out;
cursor: pointer;
}
.card-interactive:hover {
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.card-interactive:active {
background-color: #f0f0f0;
}
/* Remove for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.card,
.card-interactive {
transition: none;
}
}
/* === NAVIGATION TRANSITIONS === */
/* Nav link transitions */
nav a {
transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out;
}
nav a:hover {
background-color: rgba(0, 102, 204, 0.1);
}
nav a.active {
border-bottom: 2px solid var(--link-color, #0066cc);
}
/* Dropdown menu transitions */
.dropdown-menu {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out;
}
.dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
}
/* Remove for reduced-motion */
@media (prefers-reduced-motion: reduce) {
nav a {
transition: none;
}
.dropdown-menu {
transition: none;
/* Show/hide instantly */
}
.dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
}
}
/* === ACCORDION/COLLAPSIBLE TRANSITIONS === */
/* Accordion header */
.accordion-header {
transition: background-color 0.15s ease-in-out;
}
.accordion-header:hover {
background-color: #f5f5f5;
}
/* Accordion content */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out,
opacity 0.3s ease-in-out;
opacity: 0;
}
.accordion-content.expanded {
max-height: 1000px; /* Large enough for content */
opacity: 1;
}
/* Instant expand/collapse for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.accordion-content {
transition: none;
}
.accordion-content.expanded {
max-height: none;
opacity: 1;
}
}
/* === TAB TRANSITIONS === */
/* Tab buttons */
.tab-button {
transition: color 0.15s ease-in-out,
border-bottom-color 0.15s ease-in-out,
background-color 0.15s ease-in-out;
border-bottom: 3px solid transparent;
}
.tab-button:hover {
background-color: #f5f5f5;
}
.tab-button.active {
border-bottom-color: var(--link-color, #0066cc);
color: var(--link-color, #0066cc);
}
/* Tab panels (content) */
.tab-panel {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out;
}
.tab-panel.active {
opacity: 1;
visibility: visible;
}
/* Remove for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.tab-button,
.tab-panel {
transition: none;
}
.tab-panel.active {
opacity: 1;
visibility: visible;
}
}
/* === MODAL/DIALOG TRANSITIONS === */
/* Modal overlay fade */
.modal-overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out;
}
.modal-overlay.open {
opacity: 1;
visibility: visible;
}
/* Modal dialog (no transform, just fade) */
.modal-dialog {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.modal-overlay.open .modal-dialog {
opacity: 1;
}
/* Instant for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.modal-overlay,
.modal-dialog {
transition: none;
}
.modal-overlay.open {
opacity: 1;
visibility: visible;
}
.modal-overlay.open .modal-dialog {
opacity: 1;
}
}
/* === ALERT/NOTIFICATION TRANSITIONS === */
/* Alert fade in */
.alert {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.alert.show {
opacity: 1;
}
/* Toast notification slide + fade */
.toast {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.toast.show {
opacity: 1;
}
/* Remove slide for reduced-motion, keep fade */
@media (prefers-reduced-motion: reduce) {
.alert,
.toast {
transition: opacity 0.01ms;
}
}
/* === PROGRESS INDICATOR TRANSITIONS === */
/* Progress bar fill */
.progress-bar {
transition: width 0.3s ease-out;
}
/* Progress ring/circle (SVG stroke) */
.progress-circle {
transition: stroke-dashoffset 0.3s ease-out;
}
/* Instant progress for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.progress-bar,
.progress-circle {
transition: none;
}
}
/* === TOOLTIP TRANSITIONS === */
/* Tooltip fade in */
.tooltip {
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease-in-out,
visibility 0.15s ease-in-out;
}
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
opacity: 1;
visibility: visible;
}
/* Instant for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.tooltip {
transition: none;
}
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
opacity: 1;
visibility: visible;
}
}
/* === BADGE TRANSITIONS === */
/* Badge appearance */
.badge {
transition: background-color 0.15s ease-in-out,
color 0.15s ease-in-out;
}
/* Notification dot pulse */
.notification-dot {
transition: opacity 0.15s ease-in-out;
}
/* Remove for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.badge,
.notification-dot {
transition: none;
}
}
/* === SKELETON LOADING TRANSITIONS === */
/* Skeleton screen pulse */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
transition: opacity 0.3s ease-in-out;
}
.skeleton.loaded {
opacity: 0;
}
/* Remove animation for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.skeleton {
background: #f0f0f0; /* Static color */
transition: none;
}
}
/* === IMAGE TRANSITIONS === */
/* Image lazy load fade in */
img {
transition: opacity 0.3s ease-in-out;
}
img[loading="lazy"] {
opacity: 0;
}
img[loading="lazy"].loaded {
opacity: 1;
}
/* Instant for reduced-motion */
@media (prefers-reduced-motion: reduce) {
img {
transition: none;
}
img[loading="lazy"].loaded {
opacity: 1;
}
}
/* === TRANSITION DELAY PATTERNS === */
/* Staggered transitions (use sparingly) */
.stagger-item:nth-child(1) { transition-delay: 0s; }
.stagger-item:nth-child(2) { transition-delay: 0.05s; }
.stagger-item:nth-child(3) { transition-delay: 0.1s; }
.stagger-item:nth-child(4) { transition-delay: 0.15s; }
.stagger-item:nth-child(5) { transition-delay: 0.2s; }
/* Remove stagger for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.stagger-item {
transition-delay: 0s !important;
}
}
/* === TRANSITION BEST PRACTICES === */
/**
* Guidelines for transitions:
*
* ✓ DO:
* - Transition specific properties (background-color, opacity)
* - Keep durations short (0.1s - 0.3s)
* - Use ease-in-out for most cases
* - Provide instant feedback for active states
* - Always include reduced-motion override
*
* ✗ DON'T:
* - Use "transition: all" (performance issues)
* - Make transitions longer than 0.5s
* - Transition layout properties (width, height, margin) if avoidable
* - Forget to test with reduced-motion enabled
* - Transition properties that trigger reflow (position, float, display)
*
* Performance note:
* Best properties to transition (GPU-accelerated):
* - opacity
* - transform
*
* Avoid transitioning (causes reflow/repaint):
* - width, height
* - margin, padding
* - top, left, right, bottom (with absolute/fixed positioning)
*/
/* === TRANSITION PROPERTY PERFORMANCE === */
/* GOOD: GPU-accelerated properties */
.performant-transition {
transition: opacity 0.2s ease-in-out,
transform 0.2s ease-in-out;
}
/* ACCEPTABLE: Composite properties (some GPU acceleration) */
.acceptable-transition {
transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}
/* AVOID: Layout-triggering properties */
.avoid-transition {
/* These cause expensive reflows */
/* transition: width 0.2s, height 0.2s, margin 0.2s; */
}
/* CSS Animations and Keyframes
* @keyframes animations for complex motion sequences */
/**
* CSS animations use @keyframes to define multi-step animations
* More complex than transitions, used for:
* - Loading indicators
* - Attention-seeking effects
* - Entrance/exit animations
* - Looping animations
*
* CRITICAL: All animations must respect prefers-reduced-motion
*/
/* === LOADING SPINNER ANIMATIONS === */
/* Rotating spinner (common loading indicator) */
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--button-bg, #0066cc);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Static alternative for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
border-top-color: var(--button-bg, #0066cc);
border-right-color: var(--button-bg, #0066cc);
/* Show static "loading" state */
}
}
/* === PULSING ANIMATIONS (SAFER) === */
/* Pulse opacity (safe loading indicator) */
.pulse {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Allow gentle pulse for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.pulse {
animation: none;
opacity: 0.7; /* Static medium opacity */
}
}
/* Pulse scale (use cautiously) */
.pulse-scale {
animation: pulseScale 2s ease-in-out infinite;
}
@keyframes pulseScale {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.8; }
}
/* Remove scale for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.pulse-scale {
animation: none;
transform: scale(1);
opacity: 0.8;
}
}
/* === BOUNCING ANIMATIONS (AVOID OR DISABLE) === */
/* Bounce animation - vestibular trigger */
.bounce {
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* MUST disable for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.bounce {
animation: none;
transform: translateY(0);
}
}
/* === SHAKE ANIMATIONS (ATTENTION-SEEKING) === */
/* Shake for error feedback */
.shake {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
/* Disable for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.shake {
animation: none;
/* Could use color change instead */
border-color: #d32f2f;
}
}
/* === FADE ANIMATIONS === */
/* Fade in (safe) */
.fade-in {
animation: fadeIn 0.3s ease-in forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Fade out */
.fade-out {
animation: fadeOut 0.3s ease-out forwards;
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Keep fades but make instant for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.fade-in,
.fade-out {
animation-duration: 0.01ms;
}
}
/* === SLIDE ANIMATIONS (USE CAUTIOUSLY) === */
/* Slide in from right */
.slide-in-right {
animation: slideInRight 0.4s ease-out forwards;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Slide in from left */
.slide-in-left {
animation: slideInLeft 0.4s ease-out forwards;
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Slide in from top */
.slide-in-top {
animation: slideInTop 0.4s ease-out forwards;
}
@keyframes slideInTop {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Disable slides for reduced-motion, keep fade */
@media (prefers-reduced-motion: reduce) {
.slide-in-right,
.slide-in-left,
.slide-in-top {
animation: fadeIn 0.01ms ease-out forwards;
}
}
/* === SCALE ANIMATIONS (USE CAUTIOUSLY) === */
/* Scale up (zoom in) */
.scale-up {
animation: scaleUp 0.3s ease-out forwards;
}
@keyframes scaleUp {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* Scale down (zoom out) */
.scale-down {
animation: scaleDown 0.3s ease-in forwards;
}
@keyframes scaleDown {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0.8);
opacity: 0;
}
}
/* Remove scale for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.scale-up,
.scale-down {
animation: fadeIn 0.01ms ease-out forwards;
}
}
/* === PROGRESS ANIMATIONS === */
/* Progress bar fill animation */
.progress-fill {
animation: progressFill 2s ease-out forwards;
}
@keyframes progressFill {
from { width: 0%; }
to { width: 100%; }
}
/* Indeterminate progress bar */
.progress-indeterminate {
position: relative;
overflow: hidden;
}
.progress-indeterminate::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 50%;
height: 100%;
background: var(--button-bg, #0066cc);
animation: progressIndeterminate 1.5s ease-in-out infinite;
}
@keyframes progressIndeterminate {
0% { left: -50%; }
100% { left: 100%; }
}
/* Static progress for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.progress-fill {
animation: none;
width: 100%;
}
.progress-indeterminate::before {
animation: none;
left: 0;
width: 100%;
opacity: 0.7;
}
}
/* === SKELETON SCREEN ANIMATIONS === */
/* Skeleton loading shimmer */
.skeleton-shimmer {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Static skeleton for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.skeleton-shimmer {
animation: none;
background: #f0f0f0;
}
}
/* === NOTIFICATION/TOAST ANIMATIONS === */
/* Toast slide in from bottom */
.toast-slide-up {
animation: toastSlideUp 0.3s ease-out forwards;
}
@keyframes toastSlideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Toast slide out */
.toast-slide-down {
animation: toastSlideDown 0.3s ease-in forwards;
}
@keyframes toastSlideDown {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(100%);
opacity: 0;
}
}
/* Fade only for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.toast-slide-up {
animation: fadeIn 0.01ms ease-out forwards;
}
.toast-slide-down {
animation: fadeOut 0.01ms ease-in forwards;
}
}
/* === ATTENTION-SEEKING ANIMATIONS === */
/* Heartbeat pulse (use very sparingly) */
.heartbeat {
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
10% { transform: scale(1.1); }
20% { transform: scale(1); }
30% { transform: scale(1.1); }
40% { transform: scale(1); }
}
/* Wiggle (attention-seeking) */
.wiggle {
animation: wiggle 0.5s ease-in-out;
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
/* Flash background */
.flash {
animation: flash 0.5s ease-in-out;
}
@keyframes flash {
0%, 100% { background-color: transparent; }
50% { background-color: #fff9c4; }
}
/* Disable attention-seeking for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.heartbeat,
.wiggle {
animation: none;
transform: scale(1) rotate(0deg);
}
.flash {
animation: none;
/* Could use static highlight color */
background-color: #fff9c4;
}
}
/* === TYPING ANIMATION (CURSOR BLINK) === */
/* Blinking cursor */
.typing-cursor {
animation: blink 1s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Static cursor for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.typing-cursor {
animation: none;
opacity: 1;
}
}
/* === DOTTED LOADING ANIMATION === */
/* Three dots loading */
.loading-dots {
display: inline-flex;
gap: 0.5rem;
}
.loading-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--button-bg, #0066cc);
animation: dotBounce 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* Static dots for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.loading-dots span {
animation: none;
transform: scale(1);
opacity: 0.7;
}
}
/* === FLIP ANIMATIONS (AVOID) === */
/* Card flip - vestibular trigger */
.flip {
animation: flip 0.6s ease-in-out;
}
@keyframes flip {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(180deg); }
}
/* MUST disable for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.flip {
animation: none;
transform: rotateY(0deg);
}
}
/* === ROTATION ANIMATIONS (AVOID) === */
/* Continuous rotation - NOT RECOMMENDED */
.rotate-continuous {
animation: rotateContinuous 2s linear infinite;
}
@keyframes rotateContinuous {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Absolutely MUST disable for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.rotate-continuous {
animation: none;
transform: rotate(0deg);
}
}
/* === ANIMATION CONTROL UTILITIES === */
/* Pause animation */
.animation-paused {
animation-play-state: paused !important;
}
/* Resume animation */
.animation-running {
animation-play-state: running;
}
/* Stop animation (remove it) */
.animation-none {
animation: none !important;
}
/* === ANIMATION ITERATION CONTROL === */
/* Run once */
.animate-once {
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
/* Run twice */
.animate-twice {
animation-iteration-count: 2;
animation-fill-mode: forwards;
}
/* Loop forever (use sparingly) */
.animate-infinite {
animation-iteration-count: infinite;
}
/* Remove infinite for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animate-infinite {
animation-iteration-count: 1;
}
}
/* === ANIMATION DELAY PATTERNS === */
/* Staggered entrance animations */
.stagger-animate:nth-child(1) { animation-delay: 0s; }
.stagger-animate:nth-child(2) { animation-delay: 0.1s; }
.stagger-animate:nth-child(3) { animation-delay: 0.2s; }
.stagger-animate:nth-child(4) { animation-delay: 0.3s; }
.stagger-animate:nth-child(5) { animation-delay: 0.4s; }
/* Remove stagger for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.stagger-animate {
animation-delay: 0s !important;
}
}
/* === COMBINED ANIMATIONS === */
/* Fade + slide combo */
.fade-slide-up {
animation: fadeSlideUp 0.4s ease-out forwards;
}
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Fade only for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.fade-slide-up {
animation: fadeIn 0.01ms ease-out forwards;
}
}
/* === ANIMATION BEST PRACTICES === */
/**
* Keyframe Animation Guidelines:
*
* ✓ SAFE to use (with reduced-motion override):
* - Fade in/out (opacity only)
* - Color changes
* - Small scale (< 1.1x)
* - Progress indicators (width/height)
* - Gentle pulse (opacity)
*
* ⚠ CAUTIOUS (disable for reduced-motion):
* - Slide animations (small distance)
* - Moderate scale (1.1x - 1.3x)
* - Shake/wiggle (error feedback)
* - Short rotations (< 45deg)
*
* ✗ UNSAFE (must disable for reduced-motion):
* - Spinning/continuous rotation
* - Large slides/movement
* - Bounce effects
* - Flip/3D transforms
* - Parallax
* - Infinite loops (except loading indicators)
*
* Duration guidelines:
* - 0.1s - 0.3s: Quick animations
* - 0.3s - 0.5s: Standard animations
* - 0.5s - 1s: Slower animations (use rarely)
* - > 1s: Loading loops only
*
* Always provide:
* - Reduced-motion override (@media query)
* - Static or fade-only alternative
* - animation-fill-mode: forwards for entrance/exit
* - Appropriate easing function
*/
/* Auto-playing Animations
* Animations that start automatically without user interaction */
/**
* WCAG 2.2.2 requires that moving, blinking, or scrolling content that:
* - Starts automatically
* - Lasts more than 5 seconds
* - Is presented in parallel with other content
*
* Must provide a mechanism to pause, stop, or hide it.
*
* Best practices:
* - Respect prefers-reduced-motion (auto-disable)
* - Provide visible pause/play controls
* - Don't auto-play by default (user initiates)
* - If auto-play required, keep under 5 seconds OR provide controls
*/
/* === CAROUSEL/SLIDESHOW AUTO-PLAY === */
/**
* Auto-advancing carousels are common accessibility issues
* Must provide pause control
*/
/* Carousel container */
.carousel {
position: relative;
}
/* Auto-play is controlled via JavaScript, but CSS can style states */
.carousel[data-autoplay="true"] {
/* Visual indicator that auto-play is active */
}
.carousel[data-autoplay="false"] {
/* Visual indicator that auto-play is paused */
}
/* Carousel slides transition */
.carousel-slide {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out,
visibility 0.5s ease-in-out;
}
.carousel-slide.active {
opacity: 1;
visibility: visible;
}
/* Disable auto-play transitions for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.carousel-slide {
transition: none;
}
/* Auto-play should be disabled via JavaScript */
/* CSS can remove transition effects */
}
/* Pause/play control button (must be visible) */
.carousel-pause-button {
position: absolute;
bottom: 1rem;
right: 1rem;
z-index: 10;
/* Interactive element sizing from earlier sections */
min-width: 44px;
min-height: 44px;
background: rgba(0, 0, 0, 0.7);
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.carousel-pause-button:hover {
background: rgba(0, 0, 0, 0.85);
}
.carousel-pause-button:focus {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
/* Show pause button prominently for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
.carousel-pause-button {
/* Make even more visible */
background: rgba(0, 0, 0, 0.9);
font-weight: bold;
}
}
/* === ANIMATED BACKGROUNDS === */
/**
* Background animations (gradient shifts, particle effects)
* Should be disabled for reduced-motion
*/
/* Animated gradient background */
.animated-gradient-bg {
background: linear-gradient(
270deg,
#0066cc,
#00aaff,
#0066cc
);
background-size: 400% 400%;
animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Static background for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animated-gradient-bg {
animation: none;
background: #0066cc; /* Static color */
}
}
/* Particle background animation */
.particle-background {
position: relative;
}
.particle-background::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml,...'); /* Particle SVG */
animation: particleFloat 20s linear infinite;
}
@keyframes particleFloat {
0% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}
/* Remove particles for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.particle-background::before {
animation: none;
opacity: 0.3; /* Faint static version */
}
}
/* === PARALLAX SCROLLING === */
/**
* Parallax is a MAJOR vestibular trigger
* Must be completely disabled for reduced-motion
*/
/* Parallax layer (controlled by scroll JavaScript) */
.parallax-layer {
transition: transform 0.1s linear;
will-change: transform;
}
.parallax-layer[data-speed="0.5"] {
/* Moves at half scroll speed */
}
/* Completely disable parallax for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.parallax-layer {
transform: none !important;
transition: none !important;
will-change: auto !important;
}
}
/* === VIDEO BACKGROUNDS === */
/**
* Auto-playing video backgrounds
* Must provide pause control
*/
/* Video background container */
.video-background {
position: relative;
overflow: hidden;
}
.video-background video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: -1;
}
/* Video pause control (must be visible) */
.video-pause-control {
position: absolute;
bottom: 1rem;
right: 1rem;
z-index: 10;
min-width: 44px;
min-height: 44px;
background: rgba(0, 0, 0, 0.7);
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 50%;
cursor: pointer;
}
.video-pause-control:hover {
background: rgba(0, 0, 0, 0.9);
}
/* Show static poster image for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.video-background video {
/* JavaScript should pause video */
/* CSS can show poster frame */
display: none;
}
.video-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--video-poster);
background-size: cover;
background-position: center;
}
}
/* === ANIMATED GIFs === */
/**
* Animated GIFs cannot be paused with CSS alone
* Need JavaScript or static image alternative
*/
/* GIF container with pause overlay */
.gif-container {
position: relative;
display: inline-block;
}
.gif-container img {
display: block;
max-width: 100%;
}
/* Pause overlay (controlled by JavaScript) */
.gif-pause-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
cursor: pointer;
}
.gif-container.paused .gif-pause-overlay {
display: flex;
}
/* Replace with static image for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.gif-container[data-static-src] img {
/* JavaScript should swap src to static version */
content: url(attr(data-static-src));
}
}
/* === MARQUEE/SCROLLING TEXT === */
/**
* Auto-scrolling text (ticker, news feed)
* WCAG 2.2.2 requires pause control
*/
/* Scrolling marquee */
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
animation: marqueeScroll 20s linear infinite;
}
@keyframes marqueeScroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
/* Pause on hover (partial solution) */
.marquee:hover .marquee-content {
animation-play-state: paused;
}
/* Stop scrolling for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.marquee-content {
animation: none;
transform: translateX(0);
/* Text may need overflow handling */
white-space: normal;
}
}
/* Marquee pause button */
.marquee-pause-button {
margin-left: 1rem;
min-width: 44px;
min-height: 44px;
}
/* === ROTATING BANNERS === */
/**
* Auto-rotating promotional banners
* Must provide pause control
*/
/* Banner rotation */
.rotating-banner {
position: relative;
height: 400px;
}
.banner-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.banner-item.active {
opacity: 1;
z-index: 1;
}
/* Banner controls */
.banner-controls {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 1rem;
}
.banner-pause-button {
min-width: 44px;
min-height: 44px;
background: rgba(0, 0, 0, 0.7);
color: #ffffff;
border: none;
border-radius: 4px;
}
/* Stop rotation for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.banner-item {
transition: none;
}
/* JavaScript should stop auto-rotation */
}
/* === INFINITE SCROLLING === */
/**
* Auto-loading content on scroll
* Should provide pause mechanism
*/
/* Infinite scroll container */
.infinite-scroll {
/* Controlled primarily by JavaScript */
}
/* Loading indicator for new content */
.infinite-scroll-loader {
text-align: center;
padding: 2rem;
}
.infinite-scroll-loader .spinner {
/* Use spinner from earlier section */
}
/* Pause infinite scroll button */
.infinite-scroll-pause {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 100;
min-width: 44px;
min-height: 44px;
background: rgba(0, 0, 0, 0.8);
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
/* More prominent for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
.infinite-scroll-pause {
display: block !important;
font-weight: bold;
}
}
/* === AUTO-REFRESHING CONTENT === */
/**
* Content that updates automatically (live feeds, dashboards)
* Provide pause control
*/
/* Live update indicator */
.live-update-container {
position: relative;
}
.live-indicator {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #f0f0f0;
border-radius: 4px;
}
.live-indicator-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #00c853;
animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Static indicator for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.live-indicator-dot {
animation: none;
opacity: 1;
}
}
/* Pause updates button */
.pause-updates-button {
margin-left: 1rem;
min-width: 44px;
min-height: 44px;
}
/* === NOTIFICATION ANIMATIONS === */
/**
* Auto-appearing notifications
* Should have dismiss control
*/
/* Notification slide in */
.notification-auto {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
animation: notificationSlideIn 0.3s ease-out;
}
@keyframes notificationSlideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Auto-dismiss after delay (via JavaScript) */
.notification-auto.dismissing {
animation: notificationSlideOut 0.3s ease-in;
}
@keyframes notificationSlideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
/* Instant appearance/dismissal for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.notification-auto {
animation: fadeIn 0.01ms;
}
.notification-auto.dismissing {
animation: fadeOut 0.01ms;
}
}
/* === PAUSE/PLAY CONTROL PATTERNS === */
/**
* Standard pause/play button styling
* Should be consistent across all auto-play components
*/
/* Universal pause/play button */
.autoplay-control {
/* Base sizing from Interactive Element Sizing */
min-width: 44px;
min-height: 44px;
padding: 0.5rem;
background: rgba(0, 0, 0, 0.7);
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s ease-in-out;
}
.autoplay-control:hover {
background: rgba(0, 0, 0, 0.9);
}
.autoplay-control:focus {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
/* Icon states (use SVG or icon font) */
.autoplay-control[aria-pressed="false"]::before {
content: '▶'; /* Play icon */
}
.autoplay-control[aria-pressed="true"]::before {
content: '⏸'; /* Pause icon */
}
/* Accessible label (screen reader only) */
.autoplay-control .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === JAVASCRIPT INTEGRATION === */
/**
* Auto-play requires JavaScript coordination
* CSS provides visual states, JS handles logic
*
* JavaScript should:
* 1. Detect prefers-reduced-motion
* 2. Disable auto-play if user prefers reduced motion
* 3. Provide pause/play controls
* 4. Stop animations after 5 seconds OR provide controls
* 5. Pause on window blur/tab switch
*
* Example:
*
* const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
*
* if (prefersReducedMotion.matches) {
* // Disable all auto-play
* stopCarousel();
* pauseVideo();
* disableParallax();
* }
*/
/* === WCAG 2.2.2 COMPLIANCE CHECKLIST === */
/**
* For auto-playing animations:
*
* ✓ REQUIRED:
* - Provide pause/stop/hide mechanism
* - OR auto-play duration < 5 seconds
* - OR not in parallel with other content
* - Respect prefers-reduced-motion
* - Pause controls meet 24x24px minimum (prefer 44x44px)
* - Controls are keyboard accessible
* - Controls have visible focus indicators
* - ARIA labels for screen readers
*
* ✓ BEST PRACTICES:
* - Don't auto-play by default
* - Pause on hover (carousels)
* - Pause on window blur
* - Save user preference (paused state)
* - Provide visible "auto-play" indicator
* - Make pause button prominent
* - Use ARIA live regions for updates
*
* ✗ AVOID:
* - Auto-play without pause control
* - Hidden/difficult to find pause buttons
* - Auto-play that lasts forever
* - Multiple simultaneous auto-playing elements
* - Auto-play on mobile (bandwidth concerns)
*/
/* Scroll-triggered Animations
* Animations activated by scrolling behavior */
/**
* Scroll-triggered animations include:
* - Fade-in on scroll (reveal animations)
* - Parallax scrolling
* - Sticky headers with animation
* - Progress indicators
* - Scroll-based transformations
*
* ALL must be disabled for prefers-reduced-motion users
* These are particularly problematic for vestibular disorders
*/
/* === FADE-IN ON SCROLL === */
/**
* Elements fade in as they enter viewport
* Common pattern, but must respect reduced-motion
* Requires Intersection Observer JavaScript
*/
/* Initial hidden state */
.fade-in-scroll {
opacity: 0;
transition: opacity 0.6s ease-out;
}
/* Visible state (applied via JavaScript when in viewport) */
.fade-in-scroll.is-visible {
opacity: 1;
}
/* Instant visibility for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.fade-in-scroll {
opacity: 1 !important;
transition: none !important;
}
}
/* === SLIDE-IN ON SCROLL === */
/**
* Elements slide in from sides as viewport enters
* Must be disabled for reduced-motion
*/
/* Slide from left */
.slide-in-left-scroll {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.slide-in-left-scroll.is-visible {
opacity: 1;
transform: translateX(0);
}
/* Slide from right */
.slide-in-right-scroll {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.slide-in-right-scroll.is-visible {
opacity: 1;
transform: translateX(0);
}
/* Slide from bottom */
.slide-in-bottom-scroll {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.slide-in-bottom-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Remove transforms for reduced-motion, keep fade */
@media (prefers-reduced-motion: reduce) {
.slide-in-left-scroll,
.slide-in-right-scroll,
.slide-in-bottom-scroll {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* === PARALLAX SCROLLING === */
/**
* CRITICAL: Parallax is a MAJOR vestibular trigger
* MUST be completely disabled for reduced-motion
* No exceptions
*/
/* Parallax container */
.parallax-container {
position: relative;
overflow: hidden;
height: 500px;
}
/* Parallax layer (moves at different scroll speed) */
.parallax-layer {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
will-change: transform;
}
/* Foreground layer (normal scroll speed) */
.parallax-foreground {
/* Scroll speed: 1.0 (normal) */
}
/* Midground layer (slower scroll) */
.parallax-midground {
/* Scroll speed: 0.5 (half speed) */
}
/* Background layer (slowest scroll) */
.parallax-background {
/* Scroll speed: 0.2 (very slow) */
}
/* COMPLETELY DISABLE parallax for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.parallax-layer {
transform: none !important;
position: relative !important;
will-change: auto !important;
}
.parallax-container {
height: auto;
}
}
/* === SCROLL PROGRESS INDICATOR === */
/**
* Progress bar showing scroll position
* Generally safe, but make instant for reduced-motion
*/
/* Fixed progress bar at top */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
background: var(--button-bg, #0066cc);
z-index: 1000;
transition: width 0.1s linear;
}
/* Instant progress for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.scroll-progress {
transition: none;
}
}
/* === STICKY HEADER WITH ANIMATION === */
/**
* Header that changes appearance on scroll
* Safe if just color/shadow changes
* Problematic if includes transforms
*/
/* Sticky header base */
.sticky-header-scroll {
position: sticky;
top: 0;
z-index: 100;
background: #ffffff;
transition: box-shadow 0.3s ease-in-out,
background-color 0.3s ease-in-out,
padding 0.3s ease-in-out;
}
/* Scrolled state (applied via JavaScript) */
.sticky-header-scroll.scrolled {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
background-color: rgba(255, 255, 255, 0.95);
padding: 0.5rem 1rem; /* Reduced padding */
}
/* Instant transitions for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.sticky-header-scroll {
transition: none;
}
}
/* === SCROLL-SNAP WITH ANIMATION === */
/**
* Scroll snap points with transition effects
* Snap is safe, but animations must respect reduced-motion
*/
/* Scroll snap container */
.scroll-snap-container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
/* Scroll snap sections */
.scroll-snap-section {
scroll-snap-align: start;
height: 100vh;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
/* Active section (in view) */
.scroll-snap-section.active {
opacity: 1;
}
/* Instant for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.scroll-snap-section {
opacity: 1 !important;
transition: none !important;
}
}
/* === STAGGERED SCROLL ANIMATIONS === */
/**
* Multiple elements animate in sequence as scrolled into view
* Must disable for reduced-motion
*/
/* Staggered fade-in items */
.stagger-scroll-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease-out,
transform 0.5s ease-out;
}
.stagger-scroll-item.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays (applied via JavaScript based on index) */
.stagger-scroll-item:nth-child(1) { transition-delay: 0s; }
.stagger-scroll-item:nth-child(2) { transition-delay: 0.1s; }
.stagger-scroll-item:nth-child(3) { transition-delay: 0.2s; }
.stagger-scroll-item:nth-child(4) { transition-delay: 0.3s; }
.stagger-scroll-item:nth-child(5) { transition-delay: 0.4s; }
/* Remove all stagger and transforms for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.stagger-scroll-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
transition-delay: 0s !important;
}
}
/* === ZOOM ON SCROLL === */
/**
* Elements scale/zoom as they enter viewport
* Should be disabled for reduced-motion
*/
/* Zoom in effect */
.zoom-in-scroll {
opacity: 0;
transform: scale(0.8);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.zoom-in-scroll.is-visible {
opacity: 1;
transform: scale(1);
}
/* Remove scale for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.zoom-in-scroll {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* === ROTATE ON SCROLL === */
/**
* Elements rotate as they enter viewport
* MUST be disabled for reduced-motion
*/
/* Rotate effect */
.rotate-in-scroll {
opacity: 0;
transform: rotate(-10deg);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.rotate-in-scroll.is-visible {
opacity: 1;
transform: rotate(0deg);
}
/* Remove rotation for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.rotate-in-scroll {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* === HORIZONTAL SCROLL ANIMATIONS === */
/**
* Horizontal scrolling sections with animations
* Can be disorienting, disable for reduced-motion
*/
/* Horizontal scroll container */
.horizontal-scroll {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.horizontal-scroll-item {
flex: 0 0 80vw;
scroll-snap-align: center;
opacity: 0.5;
transition: opacity 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.horizontal-scroll-item.active {
opacity: 1;
transform: scale(1.05);
}
/* Remove smooth scroll and animations for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.horizontal-scroll {
scroll-behavior: auto;
}
.horizontal-scroll-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* === SCROLL-BASED COUNTERS === */
/**
* Numbers that count up when scrolled into view
* Animation should be disabled for reduced-motion
*/
/* Counter element */
.counter-scroll {
font-size: 3rem;
font-weight: bold;
/* Counting animation controlled by JavaScript */
}
.counter-scroll[data-counting="true"] {
/* Visual indicator during count */
color: var(--button-bg, #0066cc);
}
/* Instant final value for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.counter-scroll {
/* JavaScript should skip animation, show final value */
}
}
/* === SCROLL-TRIGGERED SVG DRAWING === */
/**
* SVG paths that "draw" on scroll
* Disable for reduced-motion
*/
/* SVG path animation */
.svg-draw-scroll path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset 1s ease-out;
}
.svg-draw-scroll.is-visible path {
stroke-dashoffset: 0;
}
/* Instant drawing for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.svg-draw-scroll path {
stroke-dashoffset: 0 !important;
transition: none !important;
}
}
/* === SCROLL-BASED BACKGROUND COLOR CHANGE === */
/**
* Background color changes as sections scroll into view
* Generally safe, but make instant for reduced-motion
*/
/* Section with background transition */
.scroll-bg-section {
min-height: 100vh;
transition: background-color 0.5s ease-in-out;
}
.scroll-bg-section[data-bg="light"] {
background-color: #ffffff;
}
.scroll-bg-section[data-bg="dark"] {
background-color: #1a1a1a;
color: #ffffff;
}
/* Instant color change for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.scroll-bg-section {
transition: none;
}
}
/* === INTERSECTION OBSERVER UTILITIES === */
/**
* CSS classes applied by Intersection Observer JavaScript
* Standard naming convention for scroll-triggered animations
*/
/* Before element enters viewport */
.before-enter {
opacity: 0;
transform: translateY(30px);
}
/* Element is entering viewport */
.is-entering {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
}
/* Element has entered viewport */
.has-entered {
opacity: 1;
transform: translateY(0);
}
/* Element is leaving viewport */
.is-leaving {
transition: opacity 0.3s ease-in;
}
/* Element has left viewport */
.has-left {
opacity: 0.7;
}
/* Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
.before-enter,
.is-entering,
.is-leaving {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.has-entered,
.has-left {
opacity: 1 !important;
}
}
/* === SMOOTH SCROLL BEHAVIOR === */
/**
* Smooth scrolling when clicking anchor links
* Should be disabled for reduced-motion
*/
/* Smooth scroll on the root element */
html {
scroll-behavior: smooth;
}
/* Instant scroll for reduced-motion */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important;
}
}
/* Smooth scroll on specific containers */
.smooth-scroll-container {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
.smooth-scroll-container {
scroll-behavior: auto !important;
}
}
/* === SCROLL-JACKING PREVENTION === */
/**
* Avoid overriding native scroll behavior excessively
* Users should maintain control
*/
/* Allow normal scrolling */
body {
/* Don't override scroll behavior globally */
overflow-y: auto;
/* Never use overflow: hidden on body */
}
/* === JAVASCRIPT INTEGRATION === */
/**
* Scroll animations require JavaScript coordination
*
* Example Intersection Observer:
*
* const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
*
* const observer = new IntersectionObserver((entries) => {
* entries.forEach(entry => {
* if (entry.isIntersecting) {
* if (!prefersReducedMotion.matches) {
* entry.target.classList.add('is-visible');
* } else {
* // Skip animation, show immediately
* entry.target.style.opacity = '1';
* entry.target.style.transform = 'none';
* }
* }
* });
* }, {
* threshold: 0.1,
* rootMargin: '0px 0px -100px 0px'
* });
*
* document.querySelectorAll('.fade-in-scroll').forEach(el => {
* observer.observe(el);
* });
*/
/* === SCROLL-TRIGGERED ANIMATION GUIDELINES === */
/**
* Best practices for scroll animations:
*
* ✓ DO:
* - Use Intersection Observer (performant)
* - Check prefers-reduced-motion before animating
* - Use fade effects (safest)
* - Keep animations subtle and brief
* - Provide instant alternative for reduced-motion
* - Animate only what's necessary
* - Use appropriate thresholds (trigger early)
*
* ⚠ CAUTIOUS:
* - Small slides/transforms (< 50px)
* - Color transitions on scroll
* - Progress indicators
* - Sticky header changes
*
* ✗ AVOID/DISABLE for reduced-motion:
* - Parallax (MAJOR trigger)
* - Large movements/slides
* - Rotation effects
* - Scale/zoom effects
* - Continuous scroll-based animation
* - Scroll-jacking (hijacking scroll)
* - Multiple simultaneous scroll animations
*
* Performance notes:
* - Use will-change sparingly (only during animation)
* - Prefer opacity/transform (GPU-accelerated)
* - Avoid animating layout properties
* - Use passive event listeners for scroll
* - Debounce scroll handlers if using them
* - Intersection Observer is preferred over scroll events
*
* Accessibility notes:
* - Animations shouldn't hide critical content
* - Content should be accessible even if JS fails
* - Don't rely on scroll animations for navigation
* - Provide alternative ways to access content
* - Test with keyboard navigation (no scroll)
*/
/* === SCROLL ANIMATION TRIGGERS === */
/**
* Common trigger points for scroll animations
*/
/* Trigger when 10% of element is visible */
.trigger-10 {
/* Applied via Intersection Observer with threshold: 0.1 */
}
/* Trigger when 50% of element is visible */
.trigger-50 {
/* Applied via Intersection Observer with threshold: 0.5 */
}
/* Trigger when fully visible */
.trigger-100 {
/* Applied via Intersection Observer with threshold: 1.0 */
}
/* Early trigger (before element enters viewport) */
.trigger-early {
/* Applied via Intersection Observer with rootMargin: '100px' */
}
/* Loading and Progress Indicators
* Visual feedback for loading states and progress */
/**
* Loading indicators show that a process is happening
* Progress indicators show how much of a process is complete
*
* Guidelines:
* - Provide static alternative for reduced-motion
* - Ensure sufficient color contrast
* - Include text labels for screen readers
* - Don't rely solely on animation to convey status
*/
/* === SPINNER LOADING INDICATORS === */
/**
* Rotating spinners are common but problematic for reduced-motion
* Provide static or pulsing alternative
*/
/* Standard circular spinner */
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--button-bg, #0066cc);
border-radius: 50%;
animation: spinRotate 1s linear infinite;
}
@keyframes spinRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Static spinner for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
border-top-color: var(--button-bg, #0066cc);
border-right-color: var(--button-bg, #0066cc);
/* Show as partial circle (static) */
}
}
/* Small spinner */
.spinner-small {
width: 20px;
height: 20px;
border-width: 2px;
}
/* Large spinner */
.spinner-large {
width: 60px;
height: 60px;
border-width: 6px;
}
/* === DUAL RING SPINNER === */
/* Two-color rotating spinner */
.spinner-dual {
width: 40px;
height: 40px;
border: 4px solid transparent;
border-top: 4px solid var(--button-bg, #0066cc);
border-bottom: 4px solid var(--button-bg, #0066cc);
border-radius: 50%;
animation: spinRotate 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.spinner-dual {
animation: none;
border: 4px solid var(--button-bg, #0066cc);
opacity: 0.7;
}
}
/* === DOTS LOADING INDICATOR === */
/**
* Animated dots - safer alternative to spinners
* Uses opacity/scale instead of rotation
*/
/* Three dots container */
.dots-loader {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.dots-loader span {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--button-bg, #0066cc);
animation: dotPulse 1.4s ease-in-out infinite;
}
.dots-loader span:nth-child(1) { animation-delay: 0s; }
.dots-loader span:nth-child(2) { animation-delay: 0.2s; }
.dots-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* Static dots for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.dots-loader span {
animation: none;
transform: scale(1);
opacity: 0.7;
}
}
/* === ELLIPSIS LOADER (TEXT-BASED) === */
/* Loading text with animated ellipsis */
.loading-text {
font-size: 1rem;
}
.loading-text::after {
content: '';
animation: ellipsis 1.5s steps(4, end) infinite;
}
@keyframes ellipsis {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
/* Static ellipsis for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.loading-text::after {
animation: none;
content: '...';
}
}
/* === PULSE LOADER === */
/**
* Pulsing circle - generally safer than spinning
*/
.pulse-loader {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--button-bg, #0066cc);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.8);
}
}
/* Static pulse for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.pulse-loader {
animation: none;
opacity: 0.7;
transform: scale(1);
}
}
/* === PROGRESS BAR (DETERMINATE) === */
/**
* Bar showing percentage of completion
* Generally safe, but make instant for reduced-motion
*/
/* Progress container */
.progress-bar-container {
width: 100%;
height: 20px;
background: #f0f0f0;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--input-border, #767676);
}
/* Progress fill */
.progress-bar-fill {
height: 100%;
background: var(--button-bg, #0066cc);
border-radius: 10px;
transition: width 0.3s ease-out;
/* Width set via JavaScript or inline style */
}
/* Progress percentage text */
.progress-bar-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
color: #000000;
font-size: 0.875rem;
}
/* Instant progress for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.progress-bar-fill {
transition: none;
}
}
/* Progress bar variants */
.progress-bar-small {
height: 8px;
}
.progress-bar-large {
height: 30px;
}
/* === PROGRESS BAR (INDETERMINATE) === */
/**
* Bar for unknown duration processes
* Shows activity but not specific progress
*/
/* Indeterminate progress container */
.progress-indeterminate {
width: 100%;
height: 4px;
background: #f0f0f0;
position: relative;
overflow: hidden;
}
/* Moving bar */
.progress-indeterminate::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 50%;
height: 100%;
background: var(--button-bg, #0066cc);
animation: indeterminateSlide 1.5s ease-in-out infinite;
}
@keyframes indeterminateSlide {
0% { left: -50%; }
100% { left: 100%; }
}
/* Static bar for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.progress-indeterminate::before {
animation: none;
left: 0;
width: 100%;
opacity: 0.5;
}
}
/* === CIRCULAR PROGRESS (DETERMINATE) === */
/**
* Circular/ring progress indicator
* Uses SVG stroke-dashoffset
*/
/* SVG circular progress */
.circular-progress {
width: 100px;
height: 100px;
transform: rotate(-90deg); /* Start at top */
}
.circular-progress-circle {
fill: none;
stroke: #f0f0f0;
stroke-width: 8;
}
.circular-progress-bar {
fill: none;
stroke: var(--button-bg, #0066cc);
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 283; /* 2 * PI * radius (45) */
stroke-dashoffset: 283; /* Updated via JavaScript */
transition: stroke-dashoffset 0.3s ease-out;
}
/* Instant for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.circular-progress-bar {
transition: none;
}
}
/* Progress percentage in center */
.circular-progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
font-weight: bold;
}
/* === SKELETON SCREENS === */
/**
* Placeholder content while loading
* Shimmer effect should be disabled for reduced-motion
*/
/* Skeleton element */
.skeleton {
background: #f0f0f0;
border-radius: 4px;
position: relative;
overflow: hidden;
}
/* Shimmer effect */
.skeleton::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
/* Static skeleton for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.skeleton::before {
animation: none;
display: none;
}
}
/* Skeleton variants */
.skeleton-text {
height: 1em;
width: 100%;
margin-bottom: 0.5em;
}
.skeleton-text-short {
width: 60%;
}
.skeleton-heading {
height: 2em;
width: 80%;
margin-bottom: 1em;
}
.skeleton-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
.skeleton-image {
width: 100%;
height: 200px;
}
.skeleton-button {
width: 120px;
height: 40px;
}
/* === LOADING OVERLAY === */
/**
* Full-screen or container overlay during loading
*/
/* Overlay container */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* Loading message */
.loading-message {
margin-top: 1rem;
font-size: 1.125rem;
color: #333333;
}
/* Fade in overlay */
.loading-overlay {
animation: fadeIn 0.2s ease-in;
}
@media (prefers-reduced-motion: reduce) {
.loading-overlay {
animation: none;
}
}
/* === BUTTON LOADING STATE === */
/**
* Button with inline loading indicator
*/
/* Button in loading state */
.button-loading {
position: relative;
color: transparent; /* Hide text */
pointer-events: none;
cursor: wait;
}
/* Spinner inside button */
.button-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: spinRotate 0.8s linear infinite;
}
/* Static loading state for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.button-loading::after {
animation: none;
border: 2px solid currentColor;
border-top-color: transparent;
}
}
/* === LOADING STATES FOR IMAGES === */
/**
* Placeholder while image loads
*/
/* Image placeholder */
.image-loading {
background: #f0f0f0;
position: relative;
min-height: 200px;
}
.image-loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 4px solid #e0e0e0;
border-top-color: #999999;
border-radius: 50%;
animation: spinRotate 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.image-loading::before {
animation: none;
border: 4px solid #999999;
}
}
/* Loaded state */
.image-loading.loaded {
background: transparent;
}
.image-loading.loaded::before {
display: none;
}
/* === STEP PROGRESS INDICATOR === */
/**
* Multi-step process indicator
* Shows current step and completion
*/
/* Steps container */
.steps-progress {
display: flex;
align-items: center;
justify-content: space-between;
margin: 2rem 0;
}
/* Individual step */
.step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
}
/* Step circle */
.step-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f0f0f0;
border: 2px solid var(--input-border, #767676);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #666666;
transition: background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out,
color 0.3s ease-in-out;
z-index: 1;
}
/* Completed step */
.step.completed .step-circle {
background: var(--button-bg, #0066cc);
border-color: var(--button-bg, #0066cc);
color: #ffffff;
}
/* Active step */
.step.active .step-circle {
background: #ffffff;
border-color: var(--button-bg, #0066cc);
border-width: 3px;
color: var(--button-bg, #0066cc);
}
/* Step label */
.step-label {
margin-top: 0.5rem;
font-size: 0.875rem;
text-align: center;
color: #666666;
}
.step.active .step-label {
color: var(--button-bg, #0066cc);
font-weight: bold;
}
/* Connector line between steps */
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 20px;
left: 50%;
width: 100%;
height: 2px;
background: #e0e0e0;
z-index: 0;
transition: background-color 0.3s ease-in-out;
}
.step.completed:not(:last-child)::after {
background: var(--button-bg, #0066cc);
}
/* Instant transitions for reduced-motion */
@media (prefers-reduced-motion: reduce) {
.step-circle,
.step::after {
transition: none;
}
}
/* === UPLOAD PROGRESS === */
/**
* File upload progress indicator
*/
/* Upload progress container */
.upload-progress {
padding: 1rem;
border: 1px solid #e0e0e0;
border-radius: 4px;
background: #f9f9f9;
}
/* File name */
.upload-filename {
font-weight: bold;
margin-bottom: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Progress bar */
.upload-progress-bar {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.upload-progress-fill {
height: 100%;
background: var(--button-bg, #0066cc);
transition: width 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.upload-progress-fill {
transition: none;
}
}
/* Upload percentage */
.upload-percentage {
font-size: 0.875rem;
color: #666666;
text-align: right;
}
/* === ACCESSIBILITY FEATURES === */
/**
* Screen reader announcements for loading states
*/
/* Visually hidden text for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Loading announcement */
.loading-announcement {
/* Use aria-live="polite" or "assertive" in HTML */
}
/* Example usage:
*
* Loading, please wait...
*
*/
/* === LOADING STATES SUMMARY === */
/**
* Loading indicator guidelines:
*
* ✓ REQUIRED:
* - Provide text alternative for screen readers
* - Use role="status" or aria-live for announcements
* - Ensure color contrast (3:1 minimum for UI components)
* - Static alternative for reduced-motion
* - Keyboard accessible (if interactive)
*
* ✓ BEST PRACTICES:
* - Use determinate progress when duration known
* - Show percentage/time remaining when possible
* - Provide cancel option for long processes
* - Use appropriate size for context
* - Don't block UI unnecessarily (inline vs overlay)
* - Remove loader when complete
*
* ⚠ REDUCED-MOTION ALTERNATIVES:
* - Spinners → Static partial circle or pulsing opacity
* - Animated dots → Static dots
* - Shimmer → Solid color
* - Indeterminate bar → Static bar with opacity
*
* ✗ AVOID:
* - Loading without any indicator
* - Animation-only communication (no text)
* - Blocking entire UI for small actions
* - Multiple simultaneous loading indicators
* - Infinite loading without timeout
*/
/* Blinking and Flashing
* CRITICAL: Seizure prevention and photosensitivity */
/**
* WCAG 2.3.1 Three Flashes or Below Threshold (Level A)
* WCAG 2.3.2 Three Flashes (Level AAA)
*
* CRITICAL SAFETY RULES:
* - NEVER flash more than 3 times per second (3 Hz)
* - NEVER use large bright flashing areas
* - AVOID red flashing (most dangerous)
* - Flashing below general flash threshold or red flash threshold
*
* Flashing can trigger seizures in people with photosensitive epilepsy
* This is a SERIOUS SAFETY ISSUE - violations can cause physical harm
*/
/* === BLINKING TEXT (DEPRECATED) === */
/**
* The