.text-gray-700 { white-space: pre-line; } .timeline-card { white-space: pre-line; transition: transform 0.2s ease, box-shadow 0.2s ease; } .timeline-card:hover { white-space: pre-line; transform: scale(1.02); box-shadow: 0 4px 20px rgba(0,0,0,0.1); } /* -- Dark mode overrides -- These apply only when has the `dark` class (toggled by JS) They purposefully use element selector chains (body.dark ...) so they override Tailwind utility classes applied inline in HTML. -- */ body.dark { background-color: #0b1220; /* near-black navy */ color: #e6eef6; /* light text */ transition: background-color 200ms ease, color 200ms ease; } /* Header */ body.dark header { background: linear-gradient(135deg,#0f1724 0%,#1f2937 50%,#3b4252 100%); } body.dark #main-title, body.dark #main-desc { color: #f1f5f9; /* ensure header text is readable */ } /* "Choose a topic to explore" heading in dark mode */ body.dark #choose-country { color: #e6eef6 !important; } /* Country/topic buttons: reduce gradient and make them darker in dark mode */ body.dark .country-btn, body.dark a[href$="game2.html"], body.dark a[href$="quizz.html"], body.dark a[href$="tutor.html"], body.dark a[href$="parallel_timeline.html"], body.dark a[href$="history_teacher_ai.html"], body.dark #toggle-tag-bar { background-image: none !important; background-color: #253046 !important; color: #e6eef6 !important; border: 1px solid rgba(255,255,255,0.06); } body.dark .country-btn:hover, body.dark a[href$="game2.html"]:hover, body.dark a[href$="quizz.html"]:hover, body.dark a[href$="tutor.html"]:hover, body.dark a[href$="parallel_timeline.html"]:hover, body.dark a[href$="history_teacher_ai.html"]:hover, body.dark #toggle-tag-bar:hover { background-color: #334155 !important; } /* Theme toggle button in dark mode */ body.dark #theme-toggle { background-color: rgba(255,255,255,0.15) !important; color: #e6eef6 !important; border: 1px solid rgba(255,255,255,0.2) !important; } body.dark #theme-toggle:hover { background-color: rgba(255,255,255,0.25) !important; } /* Maps button in header should match other header buttons in dark mode */ body.dark #maps-btn, body.dark #play-game-btn, body.dark a[href$="parallel_timeline.html"], body.dark a[href$="history_teacher_ai.html"], body.dark a[href$="quizz.html"].maps-like { background-image: none !important; background-color: #253046 !important; color: #e6eef6 !important; border: 1px solid rgba(255,255,255,0.06) !important; } body.dark #maps-btn:hover, body.dark #play-game-btn:hover, body.dark a[href$="parallel_timeline.html"]:hover, body.dark a[href$="history_teacher_ai.html"]:hover { background-color: #334155 !important; } /* Timeline cards */ /* Default .timeline-card keeps existing light appearance; override when dark */ body.dark .timeline-card { background-color: #172034 !important; /* dark card */ color: #e6eef6 !important; /* light text */ border: 1px solid rgba(255,255,255,0.06) !important; box-shadow: 0 8px 24px rgba(2,6,23,0.6) !important; } body.dark .timeline-card:hover { background-color: #1f2937 !important; box-shadow: 0 10px 30px rgba(2,6,23,0.7) !important; } body.dark .timeline-card h2, body.dark .timeline-card p { color: #e6eef6 !important; } /* Inputs and tag bar */ body.dark input, body.dark textarea, body.dark select { background-color: #0f1724 !important; color: #e6eef6 !important; border: 1px solid rgba(255,255,255,0.06) !important; } body.dark ::placeholder { color: rgba(230,238,246,0.6) !important; } body.dark #tag-bar { background: transparent; } /* Filter tag buttons in dark mode */ body.dark #tag-bar button { background-color: #253046 !important; color: #e6eef6 !important; border: 1px solid rgba(255,255,255,0.08) !important; } body.dark #tag-bar button:hover { background-color: #334155 !important; } /* Active/selected filter tags */ body.dark #tag-bar button.bg-blue-500 { background-color: #3b82f6 !important; color: white !important; border-color: #60a5fa !important; } /* Footer and general links */ body.dark footer { color: #9fb3c8 !important; } body.dark a { color: #63b3ed !important; } /* Make sure images inside cards have a subtle border in dark mode */ body.dark .timeline-card img { border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); } /* On This Day section - dark mode */ body.dark #on-this-day { background: linear-gradient(135deg, #1f2937 0%, #253046 100%) !important; border-color: rgba(139, 148, 212, 0.3) !important; } body.dark #on-this-day-title { color: #8b94d4 !important; } body.dark #on-this-day-content { background-color: #172034 !important; color: #e6eef6 !important; border: 1px solid rgba(255,255,255,0.06) !important; } body.dark #on-this-day-content h3 { color: #8b94d4 !important; } body.dark #on-this-day-content p { color: #d0d0d0 !important; } body.dark #on-this-day-content .text-gray-500 { color: #9fb3c8 !important; } body.dark #on-this-day-content .text-gray-700 { color: #d0d0d0 !important; } /* Flip card styles for On This Day / Today news */ .flip-container { perspective: 1200px; } .flip-card { width: 100%; } .flip-card-inner { position: relative; width: 100%; transform-style: preserve-3d; transition: transform 0.6s; } .flip-card-front, .flip-card-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; position: relative; width: 100%; } .flip-card-back { position: absolute; top: 0; left: 0; transform: rotateY(180deg); } .flip-card.flipped .flip-card-inner, .flip-card-inner.flipped { transform: rotateY(180deg); } /* Slightly different background for back side */ .flip-card-back { background: linear-gradient(180deg,#ffffff,#f7fafc); } .flip-controls button { cursor: pointer; } /* Back-side sizing: keep a fixed rectangle and allow internal scrolling */ .flip-card-front, .flip-card-back { box-sizing: border-box; min-height: 220px; max-height: 420px; overflow: hidden; } .flip-card-back .news-list { max-height: 360px; overflow-y: auto; padding-right: 8px; /* give space for scrollbar */ } .flip-card-back .news-list a { display: block; padding: 12px; border-radius: 8px; } .flip-card-back .news-list a .title { font-weight: 600; color: #1f2937; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* modern spec */ display: box; line-clamp: 2; overflow: hidden; } .flip-card-back .news-list a .meta { font-size: 12px; color: #6b7280; } .flip-card-back .news-list a .desc { margin-top: 6px; color: #374151; font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* modern spec */ display: box; line-clamp: 3; overflow: hidden; } /* Era line: small decorative separator and era text shown above description */ .era-line { display: flex; align-items: center; gap: 10px; } .era-line::before { content: ''; flex: 1 1 auto; height: 1px; background: rgba(15, 23, 42, 0.06); border-radius: 2px; } .era-text { flex: 0 0 auto; padding: 2px 8px; background: rgba(99,102,241,0.06); border-radius: 9999px; color: #4f46e5; /* indigo-600 */ font-size: 0.875rem; } /* Dark mode overrides for era line */ body.dark .era-line::before { background: rgba(255,255,255,0.04); } body.dark .era-text { background: rgba(139,148,212,0.12); color: #8b94d4; } /* Buy me a coffee button in header */ #buy-coffee-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } #buy-coffee-btn:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); } body.dark #buy-coffee-btn { background: #b45309; /* darker amber */ color: white !important; } /* Mobile Responsive Styles */ @media (max-width: 768px) { /* Header navigation buttons - make them smaller and wrap better */ header .flex.justify-center.gap-4 { flex-wrap: wrap; gap: 0.5rem !important; } header a[href$=".html"]:not(#buy-coffee-btn) { padding: 0.5rem 0.75rem !important; font-size: 0.75rem !important; gap: 0.25rem !important; } /* Country/topic buttons - make them more compact */ .country-btn { padding: 0.5rem 1rem !important; font-size: 0.875rem !important; gap: 0.25rem !important; } /* Topic section spacing */ #choose-country { font-size: 1.5rem !important; margin-bottom: 1rem !important; } .flex.flex-wrap.justify-center.gap-8 { gap: 0.5rem !important; } /* Header title adjustments */ #main-title { font-size: 2rem !important; } #main-desc { font-size: 1rem !important; } /* Theme toggle and language buttons - smaller on mobile */ #theme-toggle { padding: 0.5rem 0.75rem !important; font-size: 0.75rem !important; } #lang-en, #lang-fr { padding: 0.5rem 0.75rem !important; font-size: 0.75rem !important; } /* Header controls section */ .flex.justify-center.items-center.gap-4 { gap: 0.5rem !important; flex-wrap: wrap; } /* Timeline cards on mobile */ .timeline-card { margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width: 480px) { /* Extra small screens - even more compact */ header a[href$=".html"]:not(#buy-coffee-btn) { padding: 0.4rem 0.6rem !important; font-size: 0.7rem !important; } .country-btn { padding: 0.4rem 0.8rem !important; font-size: 0.8rem !important; } #main-title { font-size: 1.75rem !important; } #choose-country { font-size: 1.25rem !important; } /* Make header controls stack better */ .flex.justify-center.items-center.gap-4 { flex-direction: column; gap: 0.5rem !important; } }