/* * LexiLab shared theme * * Loaded on every page. Defines the site-wide visual language: scrollbars, * dark-mode transitions, theme toggle, toast animations, the LexiLab top * nav strip, and a few helpers used by individual tools. * * Tailwind via CDN is still doing the bulk of the styling per page; this * file only owns things that either can't be expressed in Tailwind utility * classes or that we want centralised so the two tools stay visually * consistent. * * No build step. Keep this file lean: every byte ships uncompiled. */ /* Default body font: system stack, no Google Fonts. Fast and native-feeling. */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Smooth dark/light transition on the root so palette swaps don't snap. */ html { transition: background-color 0.2s, color 0.2s; } /* Custom scrollbars in both themes. */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .dark ::-webkit-scrollbar-track { background: #1e293b; } .dark ::-webkit-scrollbar-thumb { background: #475569; } .dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Theme toggle button micro-interaction. */ .lexilab-theme-toggle { transition: opacity 0.15s, transform 0.15s; } .lexilab-theme-toggle:hover { opacity: 0.8; transform: scale(1.05); } /* Top navigation strip used on tool pages. * Keeps the back-link on the left and the theme toggle on the right at a * consistent height across pages. The landing page hides the back-link via * the data-page="landing" attribute on . */ .lexilab-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Toast animations - shared by both tools so notifications feel identical. */ .toast-enter { animation: toastSlideIn 0.3s ease-out forwards; } .toast-exit { animation: toastSlideOut 0.3s ease-in forwards; } @keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }