/* * Family Quest - Application Styles */ /* ===== Dropdown Menus ===== */ /* Hidden by default; Stimulus controller adds .dropdown-open to show */ [data-dropdown-target="menu"]:not(.dropdown-open) { display: none; } /* ===== RTL (Right-to-Left) Support ===== */ /* Base RTL text alignment — target both html and body to ensure inheritance works even with Tailwind v4 native cascade layers */ [dir="rtl"], [dir="rtl"] body { text-align: right; } [dir="ltr"], [dir="ltr"] body { text-align: left; } [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } [dir="rtl"] .text-center { text-align: center; } /* RTL Flexbox: dir="rtl" on natively handles flex direction. No CSS flex-direction overrides needed — they would double-reverse. */ /* RTL margin utilities */ [dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; } [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; } [dir="rtl"] .ml-8 { margin-left: 0; margin-right: 2rem; } [dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; } [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .mr-6 { margin-right: 0; margin-left: 1.5rem; } [dir="rtl"] .mr-8 { margin-right: 0; margin-left: 2rem; } [dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } [dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; } /* RTL padding utilities */ [dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; } [dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; } [dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; } [dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; } [dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; } [dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; } [dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; } [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; } [dir="rtl"] .pr-8 { padding-right: 0; padding-left: 2rem; } /* Ensure full-width fixed elements span entire viewport in RTL */ [dir="rtl"] .fixed.inset-x-0 { left: 0 !important; right: 0 !important; } /* RTL positioning - only swap when NOT using inset-x-0 for full width */ [dir="rtl"] .left-0:not(.right-0):not(.inset-x-0) { left: auto; right: 0; } [dir="rtl"] .left-1:not(.right-0) { left: auto; right: 0.25rem; } [dir="rtl"] .left-2:not(.right-0) { left: auto; right: 0.5rem; } [dir="rtl"] .left-4:not(.right-0) { left: auto; right: 1rem; } [dir="rtl"] .right-0:not(.left-0):not(.inset-x-0) { right: auto; left: 0; } [dir="rtl"] .right-1:not(.left-0) { right: auto; left: 0.25rem; } [dir="rtl"] .right-2:not(.left-0) { right: auto; left: 0.5rem; } [dir="rtl"] .right-4:not(.left-0) { right: auto; left: 1rem; } [dir="rtl"] .-right-2 { right: auto; left: -0.5rem; } [dir="rtl"] .-left-2 { left: auto; right: -0.5rem; } /* RTL border radius */ [dir="rtl"] .rounded-l { border-radius: 0; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } [dir="rtl"] .rounded-r { border-radius: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } [dir="rtl"] .rounded-l-lg { border-radius: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } [dir="rtl"] .rounded-r-lg { border-radius: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } /* RTL borders */ [dir="rtl"] .border-l { border-left: 0; border-right-width: 1px; } [dir="rtl"] .border-r { border-right: 0; border-left-width: 1px; } [dir="rtl"] .border-l-2 { border-left: 0; border-right-width: 2px; } [dir="rtl"] .border-r-2 { border-right: 0; border-left-width: 2px; } [dir="rtl"] .border-l-4 { border-left: 0; border-right-width: 4px; } [dir="rtl"] .border-r-4 { border-right: 0; border-left-width: 4px; } /* RTL space utilities */ [dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 0.75rem; } [dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 1.5rem; } [dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 0; margin-right: 2rem; } /* Space-x-reverse for explicit RTL spacing */ [dir="rtl"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; } /* RTL transforms */ [dir="rtl"] .translate-x-1\/2 { transform: translateX(-50%); } [dir="rtl"] .-translate-x-1\/2 { transform: translateX(50%); } [dir="rtl"] .translate-x-full { transform: translateX(-100%); } [dir="rtl"] .-translate-x-full { transform: translateX(100%); } /* RTL grid */ [dir="rtl"] .grid { direction: rtl; } /* Fix form inputs in RTL */ [dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; } [dir="rtl"] input[type="number"] { text-align: left; /* Numbers stay LTR */ } /* Buttons and submits should center text */ [dir="rtl"] input[type="submit"], [dir="rtl"] button, [dir="rtl"] .text-center { text-align: center; } /* Fix lists in RTL */ [dir="rtl"] .list-disc, [dir="rtl"] .list-decimal { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .list-inside { padding-right: 0; } /* Hebrew Font */ .font-hebrew { font-family: "Heebo", "Assistant", system-ui, sans-serif; } /* Ensure Hebrew text doesn't break awkwardly */ [dir="rtl"] { word-break: normal; overflow-wrap: break-word; } /* Animations */ @keyframes slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .animate-slide-in { animation: slide-in 0.3s ease-out; } @keyframes bounce-in { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .animate-bounce-in { animation: bounce-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; } /* Celebration confetti */ @keyframes confetti-fall { 0% { transform: translateY(-100%) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } .confetti { position: fixed; animation: confetti-fall 3s linear forwards; z-index: 9999; pointer-events: none; } /* Safe area for mobile devices */ .safe-area-inset-bottom { padding-bottom: env(safe-area-inset-bottom); } /* Line clamp utility */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #c7c7c7; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* Focus styles */ *:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; } /* Skip to main content link */ .skip-link { position: absolute; top: -100%; left: 0; z-index: 9999; padding: 0.75rem 1.5rem; background: #6366f1; color: white; font-weight: 600; text-decoration: none; border-radius: 0 0 0.5rem 0; } .skip-link:focus { top: 0; } [dir="rtl"] .skip-link { left: auto; right: 0; border-radius: 0 0 0 0.5rem; } /* Reduced motion preference */ @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; } } /* ===== Accessibility Widget Modes ===== */ /* High contrast */ .a11y-high-contrast { filter: contrast(1.4); } .a11y-high-contrast body { background: #000 !important; color: #fff !important; } .a11y-high-contrast a { color: #ffd700 !important; } .a11y-high-contrast button, .a11y-high-contrast input, .a11y-high-contrast select, .a11y-high-contrast textarea { border: 2px solid #fff !important; } /* Highlight links */ .a11y-highlight-links a { outline: 2px solid #6366f1 !important; outline-offset: 2px; text-decoration: underline !important; } /* Readable font (dyslexia-friendly) */ .a11y-readable-font, .a11y-readable-font * { font-family: "OpenDyslexic", "Comic Sans MS", "Arial", sans-serif !important; letter-spacing: 0.05em !important; word-spacing: 0.1em !important; line-height: 1.8 !important; } /* Grayscale */ .a11y-grayscale { filter: grayscale(100%); } /* Stop animations */ .a11y-stop-animations *, .a11y-stop-animations *::before, .a11y-stop-animations *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Don't apply a11y filters to the widget itself */ #accessibility-widget { filter: none !important; } .a11y-high-contrast #accessibility-widget, .a11y-grayscale #accessibility-widget { filter: none !important; } .a11y-readable-font #accessibility-widget * { font-family: system-ui, -apple-system, sans-serif !important; letter-spacing: normal !important; word-spacing: normal !important; line-height: 1.5 !important; } /* Turbo progress bar */ .turbo-progress-bar { height: 3px; background-color: #6366f1; }