/* Snack Apps i18n CSS * Language-based display rules for 10 supported languages * Usage: Add lang attribute to element and use .lang-XX class on text elements */ /* Default: Hide all non-English, show English */ .lang-ko, .lang-ja, .lang-zh, .lang-es, .lang-pt, .lang-fr, .lang-de, .lang-vi, .lang-th { display: none !important; } .lang-en { display: inline !important; } /* Korean */ html[lang="ko"] .lang-en { display: none !important; } html[lang="ko"] .lang-ko { display: inline !important; } /* Japanese */ html[lang="ja"] .lang-en { display: none !important; } html[lang="ja"] .lang-ja { display: inline !important; } /* Chinese */ html[lang="zh"] .lang-en { display: none !important; } html[lang="zh"] .lang-zh { display: inline !important; } /* Spanish */ html[lang="es"] .lang-en { display: none !important; } html[lang="es"] .lang-es { display: inline !important; } /* Portuguese */ html[lang="pt"] .lang-en { display: none !important; } html[lang="pt"] .lang-pt { display: inline !important; } /* French */ html[lang="fr"] .lang-en { display: none !important; } html[lang="fr"] .lang-fr { display: inline !important; } /* German */ html[lang="de"] .lang-en { display: none !important; } html[lang="de"] .lang-de { display: inline !important; } /* Vietnamese */ html[lang="vi"] .lang-en { display: none !important; } html[lang="vi"] .lang-vi { display: inline !important; } /* Thai */ html[lang="th"] .lang-en { display: none !important; } html[lang="th"] .lang-th { display: inline !important; } /* Language selector styling */ .lang-selector { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; color: #374151; border: 1px solid #e5e7eb; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .lang-selector:focus { outline: 2px solid #6366f1; outline-offset: 2px; } /* Loading Spinner */ .snack-spinner { width: 48px; height: 48px; border: 4px solid rgba(99, 102, 241, 0.2); border-left-color: #6366f1; border-radius: 50%; animation: snack-spin 1s linear infinite; margin: 0 auto 1rem; } @keyframes snack-spin { to { transform: rotate(360deg); } } /* Dark theme spinner (for dark backgrounds) */ .snack-spinner-light { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.2); border-left-color: #ffffff; border-radius: 50%; animation: snack-spin 1s linear infinite; margin: 0 auto 1rem; } /* ===== Accessibility: Focus Styles ===== */ /* Global focus-visible styles for keyboard navigation */ *:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; } /* Remove default focus outline when not keyboard navigating */ *:focus:not(:focus-visible) { outline: none; } /* Enhanced focus for interactive elements */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); } /* Skip link styles (for accessibility) */ .snack-skip-link { position: absolute; top: -40px; left: 0; background: #6366f1; color: white; padding: 8px 16px; z-index: 100; text-decoration: none; font-weight: 500; border-radius: 0 0 8px 0; transition: top 0.2s ease; } .snack-skip-link:focus { top: 0; } /* High contrast mode support */ @media (prefers-contrast: high) { *:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .snack-spinner, .snack-spinner-light { animation: none; border-left-color: transparent; border-top-color: #6366f1; } .snack-spinner-light { border-top-color: #ffffff; } }