/* ============================================ TACTILE HELPER TEXT - "Tactile Indicator Bundle" ============================================ A unified helper text design for the 2026 "Squishy-uishy" design system. Transforms error messages from flat warning text into physical, empathetic tactile indicators with clay bead icons and soft coral coloring. Design Philosophy: - "Empathy Coral" (#E57373) instead of harsh red - feels supportive, not punitive - Rounded sans-serif typography harmonizes with pillowy corner radii - Clay bead icon provides physical 3D anchor - Soft text glow makes letters appear illuminated from behind - Spring animations for entrance/exit ============================================ */ /* ============================================ 1. BASE HELPER TEXT STYLING ============================================ */ /* Base styles for all tactile form helper text */ .tactile-helper-text, .squishy-textfield .MuiFormHelperText-root, .claymorphic-autocomplete .MuiFormHelperText-root, .claymorphic-datepicker .MuiFormHelperText-root, .claymorphic-multiline .MuiFormHelperText-root, .claymorphic-number-counter .MuiFormHelperText-root, .claymorphic-counter-error-message, .claymorphic-radio-group .MuiFormHelperText-root, .claymorphic-checkbox-group .MuiFormHelperText-root, .claymorphic-toggle .MuiFormHelperText-root { /* Typography: Rounded Sans-Serif, Medium Weight */ font-family: 'Nunito', 'Varela Round', 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; font-size: 0.85rem; letter-spacing: 0.01em; line-height: 1.4; /* Layout: Flex for bead alignment */ display: flex; align-items: center; gap: 0; /* Spacing - generous breathing room so shadows don't feel cramped */ margin-top: 8px; margin-bottom: 6px; margin-left: 2px; padding: 0; /* Default color (non-error) */ color: var(--helper-text-color, #666); /* Spring animation for appearance */ transition: color 400ms linear(0, 0.1772, 0.5019, 0.7861, 0.9667, 1.0498, 1.068, 1.0544, 1.0322, 1.0133, 1.0016, 0.9964, 1), opacity 400ms linear(0, 0.1772, 0.5019, 0.7861, 0.9667, 1.0498, 1.068, 1.0544, 1.0322, 1.0133, 1.0016, 0.9964, 1), transform 400ms linear(0, 0.1772, 0.5019, 0.7861, 0.9667, 1.0498, 1.068, 1.0544, 1.0322, 1.0133, 1.0016, 0.9964, 1), text-shadow 400ms ease-out; } /* ============================================ 2. ERROR STATE - "Empathy Coral" Styling ============================================ */ .tactile-helper-text.Mui-error, .squishy-textfield .MuiFormHelperText-root.Mui-error, .claymorphic-autocomplete .MuiFormHelperText-root.Mui-error, .claymorphic-datepicker .MuiFormHelperText-root.Mui-error, .claymorphic-multiline .MuiFormHelperText-root.Mui-error, .claymorphic-number-counter .MuiFormHelperText-root.Mui-error, .claymorphic-counter-error-message, .claymorphic-radio-group .MuiFormHelperText-root.Mui-error, .claymorphic-checkbox-group .MuiFormHelperText-root.Mui-error, .claymorphic-toggle .MuiFormHelperText-root.Mui-error { /* Empathy Coral - supportive, not punitive */ color: var(--helper-text-error, #E57373); /* Soft text glow - letters illuminated from behind */ text-shadow: 0 0 8px rgba(229, 115, 115, 0.25), 0 0 16px rgba(229, 115, 115, 0.15); /* Subtle scale up for emphasis */ transform: scale(1.01); } /* ============================================ 3. CLAY BEAD ICON - Physical Anchor ============================================ */ /* The tiny clay marble that anchors the text */ .tactile-helper-text.Mui-error::before, .squishy-textfield .MuiFormHelperText-root.Mui-error::before, .claymorphic-autocomplete .MuiFormHelperText-root.Mui-error::before, .claymorphic-datepicker .MuiFormHelperText-root.Mui-error::before, .claymorphic-multiline .MuiFormHelperText-root.Mui-error::before, .claymorphic-number-counter .MuiFormHelperText-root.Mui-error::before, .claymorphic-counter-error-message::before, .claymorphic-radio-group .MuiFormHelperText-root.Mui-error::before, .claymorphic-checkbox-group .MuiFormHelperText-root.Mui-error::before, .claymorphic-toggle .MuiFormHelperText-root.Mui-error::before { content: ''; display: inline-block; flex-shrink: 0; /* Bead dimensions - small marble */ width: 7px; height: 7px; /* Spacing from text */ margin-right: 8px; /* Clay marble appearance */ background: linear-gradient( 145deg, #ef9a9a 0%, /* Light coral highlight */ #E57373 40%, /* Empathy Coral base */ #d32f2f 100% /* Deeper coral shadow */ ); border-radius: 50%; /* 3D depth - sits slightly above the surface */ box-shadow: /* Drop shadow - floating above card */ 0 2px 4px rgba(229, 115, 115, 0.35), 0 1px 2px rgba(229, 115, 115, 0.25), /* Inner top highlight - glossy sheen */ inset 1px 1px 2px rgba(255, 255, 255, 0.4), /* Inner bottom shadow - spherical depth */ inset -1px -1px 2px rgba(183, 28, 28, 0.3); /* Subtle outer glow */ filter: drop-shadow(0 0 3px rgba(229, 115, 115, 0.3)); /* Entrance animation */ animation: bead-appear 400ms linear(0, 0.1772, 0.5019, 0.7861, 0.9667, 1.0498, 1.068, 1.0544, 1.0322, 1.0133, 1.0016, 0.9964, 1) forwards; } /* Bead entrance animation - pops in with spring */ @keyframes bead-appear { 0% { opacity: 0; transform: scale(0) translateY(-4px); } 60% { opacity: 1; transform: scale(1.15) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* ============================================ 4. SUCCESS STATE - "Celebratory Mint" (Optional) ============================================ */ .tactile-helper-text.success, .MuiFormHelperText-root.tactile-success { /* Celebratory Mint - positive reinforcement */ color: var(--helper-text-success, #4DB6AC); /* Soft mint glow */ text-shadow: 0 0 8px rgba(77, 182, 172, 0.25), 0 0 16px rgba(77, 182, 172, 0.15); } /* Success bead - mint marble */ .tactile-helper-text.success::before, .MuiFormHelperText-root.tactile-success::before { content: ''; display: inline-block; flex-shrink: 0; width: 7px; height: 7px; margin-right: 8px; /* Mint marble */ background: linear-gradient( 145deg, #80cbc4 0%, #4DB6AC 40%, #00897b 100% ); border-radius: 50%; box-shadow: 0 2px 4px rgba(77, 182, 172, 0.35), 0 1px 2px rgba(77, 182, 172, 0.25), inset 1px 1px 2px rgba(255, 255, 255, 0.4), inset -1px -1px 2px rgba(0, 105, 92, 0.3); filter: drop-shadow(0 0 3px rgba(77, 182, 172, 0.3)); animation: bead-appear 400ms linear(0, 0.1772, 0.5019, 0.7861, 0.9667, 1.0498, 1.068, 1.0544, 1.0322, 1.0133, 1.0016, 0.9964, 1) forwards; } /* ============================================ 5. TEXT ENTRANCE ANIMATION ============================================ */ /* Animate text content appearing */ .tactile-helper-text.Mui-error, .squishy-textfield .MuiFormHelperText-root.Mui-error, .claymorphic-autocomplete .MuiFormHelperText-root.Mui-error, .claymorphic-datepicker .MuiFormHelperText-root.Mui-error, .claymorphic-multiline .MuiFormHelperText-root.Mui-error, .claymorphic-number-counter .MuiFormHelperText-root.Mui-error, .claymorphic-counter-error-message, .claymorphic-radio-group .MuiFormHelperText-root.Mui-error, .claymorphic-checkbox-group .MuiFormHelperText-root.Mui-error, .claymorphic-toggle .MuiFormHelperText-root.Mui-error { animation: text-fade-in 400ms linear(0, 0.1772, 0.5019, 0.7861, 0.9667, 1.0498, 1.068, 1.0544, 1.0322, 1.0133, 1.0016, 0.9964, 1) forwards; } @keyframes text-fade-in { 0% { opacity: 0; transform: translateY(-6px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1.01); } } /* ============================================ 6. HOVER INTERACTION ============================================ */ /* Subtle hover effect on error helper text */ .tactile-helper-text.Mui-error:hover, .squishy-textfield .MuiFormHelperText-root.Mui-error:hover, .claymorphic-autocomplete .MuiFormHelperText-root.Mui-error:hover, .claymorphic-datepicker .MuiFormHelperText-root.Mui-error:hover, .claymorphic-multiline .MuiFormHelperText-root.Mui-error:hover, .claymorphic-number-counter .MuiFormHelperText-root.Mui-error:hover, .claymorphic-counter-error-message:hover, .claymorphic-radio-group .MuiFormHelperText-root.Mui-error:hover, .claymorphic-checkbox-group .MuiFormHelperText-root.Mui-error:hover, .claymorphic-toggle .MuiFormHelperText-root.Mui-error:hover { /* Intensify glow on hover */ text-shadow: 0 0 10px rgba(229, 115, 115, 0.35), 0 0 20px rgba(229, 115, 115, 0.2); } /* Bead pulses slightly on hover */ .tactile-helper-text.Mui-error:hover::before, .squishy-textfield .MuiFormHelperText-root.Mui-error:hover::before, .claymorphic-autocomplete .MuiFormHelperText-root.Mui-error:hover::before, .claymorphic-datepicker .MuiFormHelperText-root.Mui-error:hover::before, .claymorphic-multiline .MuiFormHelperText-root.Mui-error:hover::before, .claymorphic-number-counter .MuiFormHelperText-root.Mui-error:hover::before, .claymorphic-counter-error-message:hover::before, .claymorphic-radio-group .MuiFormHelperText-root.Mui-error:hover::before, .claymorphic-checkbox-group .MuiFormHelperText-root.Mui-error:hover::before, .claymorphic-toggle .MuiFormHelperText-root.Mui-error:hover::before { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(229, 115, 115, 0.4)); } /* ============================================ 7. REDUCED MOTION PREFERENCE ============================================ */ @media (prefers-reduced-motion: reduce) { .tactile-helper-text, .squishy-textfield .MuiFormHelperText-root, .claymorphic-autocomplete .MuiFormHelperText-root, .claymorphic-datepicker .MuiFormHelperText-root, .claymorphic-multiline .MuiFormHelperText-root, .claymorphic-number-counter .MuiFormHelperText-root, .claymorphic-counter-error-message, .claymorphic-radio-group .MuiFormHelperText-root, .claymorphic-checkbox-group .MuiFormHelperText-root, .claymorphic-toggle .MuiFormHelperText-root { transition: none !important; animation: none !important; } .tactile-helper-text.Mui-error::before, .squishy-textfield .MuiFormHelperText-root.Mui-error::before, .claymorphic-autocomplete .MuiFormHelperText-root.Mui-error::before, .claymorphic-datepicker .MuiFormHelperText-root.Mui-error::before, .claymorphic-multiline .MuiFormHelperText-root.Mui-error::before, .claymorphic-number-counter .MuiFormHelperText-root.Mui-error::before, .claymorphic-counter-error-message::before, .claymorphic-radio-group .MuiFormHelperText-root.Mui-error::before, .claymorphic-checkbox-group .MuiFormHelperText-root.Mui-error::before, .claymorphic-toggle .MuiFormHelperText-root.Mui-error::before { animation: none !important; opacity: 1; transform: scale(1); } } /* ============================================ 8. DARK MODE SUPPORT (Future) ============================================ */ @media (prefers-color-scheme: dark) { .tactile-helper-text.Mui-error, .squishy-textfield .MuiFormHelperText-root.Mui-error, .claymorphic-autocomplete .MuiFormHelperText-root.Mui-error, .claymorphic-datepicker .MuiFormHelperText-root.Mui-error, .claymorphic-multiline .MuiFormHelperText-root.Mui-error, .claymorphic-number-counter .MuiFormHelperText-root.Mui-error, .claymorphic-counter-error-message, .claymorphic-radio-group .MuiFormHelperText-root.Mui-error, .claymorphic-checkbox-group .MuiFormHelperText-root.Mui-error, .claymorphic-toggle .MuiFormHelperText-root.Mui-error { /* Slightly brighter coral for dark backgrounds */ color: var(--helper-text-error-dark, #ef9a9a); text-shadow: 0 0 10px rgba(239, 154, 154, 0.35), 0 0 20px rgba(239, 154, 154, 0.2); } }