500bd192d5
- Complete KidsAI Explorer application - Multi-language support (English/German) - AI-powered educational guidance using OpenAI - Interactive chat interface for children - Proper placeholder translation fixes - Mobile-responsive design - Educational framework for critical thinking
127 lines
2.9 KiB
CSS
Executable File
127 lines
2.9 KiB
CSS
Executable File
/* Additional fallback styles for better compatibility */
|
|
|
|
/* Ensure all buttons look good regardless of icon loading */
|
|
.ask-btn,
|
|
.action-btn,
|
|
.lang-btn {
|
|
min-height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Fallback button styles */
|
|
.ask-btn::before {
|
|
content: "🚀";
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.research::before {
|
|
content: "🔍";
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.experiment::before {
|
|
content: "🧪";
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.discuss::before {
|
|
content: "💬";
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* Hide Font Awesome icons if they don't load, show emoji fallbacks */
|
|
.fas {
|
|
position: relative;
|
|
}
|
|
|
|
.fas::before {
|
|
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji;
|
|
}
|
|
|
|
/* Suggestion card icons with fallback */
|
|
.suggestion-card[data-question-en*="seasons"] .fas::before,
|
|
.suggestion-card[data-question-de*="Jahreszeiten"] .fas::before {
|
|
content: "☀️";
|
|
}
|
|
|
|
.suggestion-card[data-question-en*="birds"] .fas::before,
|
|
.suggestion-card[data-question-de*="Vögel"] .fas::before {
|
|
content: "🕊️";
|
|
}
|
|
|
|
.suggestion-card[data-question-en*="water"] .fas::before,
|
|
.suggestion-card[data-question-de*="Wasser"] .fas::before {
|
|
content: "💧";
|
|
}
|
|
|
|
.suggestion-card[data-question-en*="computers"] .fas::before,
|
|
.suggestion-card[data-question-de*="Computer"] .fas::before {
|
|
content: "💻";
|
|
}
|
|
|
|
.suggestion-card[data-question-en*="dream"] .fas::before,
|
|
.suggestion-card[data-question-de*="träumen"] .fas::before {
|
|
content: "🌙";
|
|
}
|
|
|
|
.suggestion-card[data-question-en*="rainbow"] .fas::before,
|
|
.suggestion-card[data-question-de*="Regenbogen"] .fas::before {
|
|
content: "🌈";
|
|
}
|
|
|
|
/* Loading animation gears with fallback */
|
|
.gear::before {
|
|
content: "⚙️";
|
|
font-size: inherit;
|
|
display: inline-block;
|
|
animation: inherit;
|
|
}
|
|
|
|
/* Ensure good typography fallback */
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, .thinking-step h4, .welcome-section h2, .suggestions-section h3 {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Comic Sans MS", cursive, sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Ensure color consistency */
|
|
.thinking-step, .welcome-section, .question-section, .suggestions-section, .thinking-section {
|
|
background: rgba(255, 255, 255, 0.95) !important;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* Button improvements */
|
|
.ask-btn, .action-btn {
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
text-transform: none;
|
|
}
|
|
|
|
/* Animation consistency */
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.05); opacity: 0.8; }
|
|
}
|
|
|
|
/* Responsive improvements */
|
|
@media (max-width: 480px) {
|
|
.lang-btn {
|
|
padding: 4px 8px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.brain-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.logo h1 {
|
|
font-size: 2rem;
|
|
}
|
|
}
|